Reactjs 如何循环反应

如何循环重复

这是我的密码

这是App.js

import React from 'react';
import './App.css';
import Child from './Child/Child';

function App() {
  return (
    <div className="container">
      <div className='row'>
        <Child></Child>
      </div>
    </div>
  );
}

export default App;

从“React”导入React；
导入“/App.css”；
从“./Child/Child”导入子项；
函数App（）{
返回(
);
}
导出默认应用程序；

这是Child.js

import React from 'react';
import './Child.css';

function Child() {
    return(
        <div className='container'>
            <div className='row'>
                <h1>Mark</h1>
            </div>
        </div>
    )
}

export default Child

从“React”导入React；
导入“/Child.css”；
函数子（）{
返回(
做记号
)
}
导出默认子对象

---

如果我不清楚我的疑问，请发表评论。

要循环

n

次数，您可以

映射
一个长度数组
n
，并返回您的组件

function App() {
  const n = 10;
  return (
    <div className="container">
      <div className='row'>
        {[...Array(n)].map((_, index) => (
           <Child key={index} />
        ))}
      </div>
    </div>
  );
}

函数应用程序（）{
常数n=10；
返回(
{[…数组（n）].map（（u，索引）=>(
))}
);
}
您只需将十个子组件放入一个数组中并渲染即可

const children = []
for(let i = 0; i < 10; i++){
  children.push(<Child key={i}/>)
}
  return (
    <div className="container">
      <div className='row'>
        {children}
      </div>
    </div>
  );

const children=[]
for（设i=0；i<10；i++）{
儿童推
}
返回(
{儿童}
);