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的{{1}}循环来生成元素数组并返回它：

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> ) }不会真正呈现任何内容，它不是void/self-closing元素，例如<div />。相反，您需要将div元素返回为<meta />。

关于语法<div className={styles.box} key={i}>{whatever}</div>，必须有一个Webpack涉及如何处理/转换[...Array(10)]，Array(10)，[...Array(10)]甚至是[[...]新的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>
   )
 }
}

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

从循环反应渲染

2 个答案: