从循环反应渲染

Question

我正在尝试做一些非常简单的事情但是我的代码不能很好地完成。我可以看到它渲染但只有3次，而不是9次

const renderTempBoxes = () => {
  for (var i = 0; i < 10; i++) {
    console.log('i = ', i);
    return <div className={styles.box} key={i} />;
  }
};

const Component = () => {
  return (
   {renderTempBoxes()}
  )
}

这甚至不起作用，当我只想要9个框来渲染时使用数组是过分的。更新：

const Component = () => {
  return (
   <div>
     {
      [...Array(10)].map((x, i) => {
        console.log('i = ', i);
        return <div className={styles.box} key={i} />;
      })
     }
    </div>
  )
}

Answer 1

第一个问题是你根本无法从for循环中返回单个元素。这不是React特有的，这只是一个JavaScript问题。相反，您可以尝试使用Array.from来映射元素数组：

const renderTempBoxes = () => Array.from({ length: 10 }).map((v, i) => 
    <div className={styles.box} key={i}>{i}</div>
);

或者只是使用for的Array.prototype.push循环生成一个元素数组并返回它：

const renderTempBoxes = () => {
  let els = [];

  for (let i = 0; i < 10; i++) {
    els.push(<div className={styles.box} key={i}>{i}</div>);
  }

  return els;
};

渲染元素：

const Component = () => {
  return (
   <div>
     {renderTempBoxes()}
   </div>
  )
}

或者使用React.Fragment放弃包装额外节点：

const Component = () => {
  return (
   <React.Fragment>
     {renderTempBoxes()}
   </React.Fragment>
  )
}

你的例子的第二个问题是<div />不会真正渲染任何东西，它不是void/self-closing元素，如<meta />。相反，你需要将div元素作为<div className={styles.box} key={i}>{whatever}</div>返回。

关于语法[...Array(10)]，必须有一个Webpack来处理/转换Array(10)，[...Array(10)]，[...new Array(10)]，甚至`[... new Array（10）.keys（）]。答案中描述的任何一种方法都可以解决您的问题。

我创建了一个StackBlitz来演示功能。

Answer 2

当尝试渲染多次相同的组件时，使用一个数组和一个映射。

export default class MyComp extends Component {

 constructor(props) {
  super(props)
  this.state = {
   array: [{key: 1, props: {...}}, {key: 2, props: {...}, ...]
  }
 }

 render () {
   return (
     <div>
      {this.state.array.map((element) => {
      return <div key={element.key} {...element.props}> 
     })}
     </div>
   )
 }
}

请记住始终为您呈现的每个组件设置唯一键