reactjs - 如何将同一个组件渲染 5 次？（克隆组件）

Question

如何渲染同一个组件 5 次？（克隆组件）请告诉如何在渲染中渲染相同的组件 5 次。我有5个相同的表格。

标签： reactjs

Answer 1

您可以根据Array.from需要创建任意数量的组件副本。

例子

function MyComponent() {
  return <div> MyComponent </div>;
}

function App() {
  return (
    <div>
      {Array.from({ length: 5 }, (_, index) => <MyComponent key={index} />)}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>