代码之家 › 专栏 › 技术社区 › me-me

从循环渲染

reactjs

me-me · 技术社区 · 6 年前

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

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

更新:

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

2 回复 | 直到 6 年前

Alexander Staroselsky 6 年前

第一个问题是不能从 for 像那样循环。这不是特定的反应,这只是一个JavaScript问题。相反,你可以使用 Array.from 要映射元素数组,请执行以下操作:

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

对于 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 className={styles.box} key={i}>{whatever}</div> .

[...Array(10)] ,必须有一个关于如何处理/传输文件的网页包 Array(10) , […阵列(10)] , [...new Array(10)] ,甚至“[…new Array(10).keys()]”。答案中描述的任何一种方法都可以解决您的问题。

我创造了一个 StackBlitz

Lucas Fabre 6 年前

当尝试多次渲染同一组件时,会在其上使用一个数组和一个贴图。

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>
   )
 }
}

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

推荐文章