如何循环react

IT技术 reactjs
2021-05-14 15:11:34

如何循环重复

这是我的代码

这是 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;

这是 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

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

2个回答

您可以将十个子组件放入一个数组中并进行渲染。

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

https://reactjs.org/docs/lists-and-keys.html#rendering-multiple-components

要循环n次数，您可以map遍历一个长度数组n并返回您的组件。

function App() {
  const n = 10;
  return (
    <div className="container">
      <div className='row'>
        {[...Array(n)].map((_, index) => (
           <Child key={index} />
        ))}
      </div>
    </div>
  );
}
其它你可能感兴趣的问题
上一篇Babel 7 和 webpack 4 不适用于数组中的条件扩展操作[短路语法] 下一篇React.Js 未在 Django 项目中呈现