react教程，react四种方案循环渲染输出子组件

我们相信：世界是美好的，你是我也是。平行空间的世界里面， 不同版本的生活 也在继续...

react 项目如何输出多个重复的子组件，当然是使用循环了。在前面的文章里面，使用了 map 来实现类似的需求。本文也没有太多的新意，就是通过一个新的函数，叫做 Array.from({length:len}) 来快速获得对应数据的数组，用于循环。

苏南大叔的程序如此灵动博客，记录苏南大叔和计算机代码的故事。测试环境： [email protected] ， [email protected] ， [email protected] ， [email protected] 。使用循环的原因就是：复制粘贴100回子组件的代码，是不是显得有点sha啊。

前文回顾

前文里面，曾经对 react 根据数组生成子组件的事情做过总结。见下文：

• https://newsn.net/say/react-map.html

上述文章中，典型的代码如下：

render() {
  const items = ["苏南大叔", "sunan大叔", "sunan"];
  return (
      {items.map((item, index) => (
        <div key={index}>{item}</div>
      {result}
}

对于完全相同的重复组件来说，数组的定义内容其实并不重要，而循环的次数是更为重要的。参考下面的新写法：

方案一， for +函数(长度)。

const App = () => {
  var list = (length) => {
    var res = [];
    for (var i = 0; i < length; i++) {
      res.push(<div key={i}>占位符2</div>)
    return res
  return (<>
    {list(2)}
export default App

方案二， array.from(长度).map() 。

const App = () => {
  return (<>
    {Array.from({ length: 3 }).map((value, index) => {
      return (
        <p key={index}>占位符3</p>
export default App

方案三， Array(长度).fill(内容).map()

const App = () => {
  return (<>
    {Array(3).fill("占位符4").map((value, index) => {
      return (
        <p key={index}>{value}</p>
export default App

方案四， Array(长度).fill(jsx) 【不推荐】

const App = () => {
  const [on, setOn] = useState(false);
  const p = <p className={on ? "on" : "off"}>key不可变</p>;
  const lists = Array(3).fill(p);
  return (