代码之家 › 专栏 › 技术社区 › Deadpool

在父组件内添加次数为N的子组件(基于状态值)

react-hooks react-native reactjs javascript

2

Deadpool · 技术社区 · 4 年前

我想添加一个子组件 ColorBox 作为对父组件的回报 ColorBoxContainer 基于状态中存在值的次数 noOfBoxes: 16 。我正在尝试使用for循环,但我猜代码是错误的。有人能帮我吗,如何做到这一点?

import React, { Component } from 'react';
import ColorBox from './ColorBox';

class ColorBoxContainer extends Component {

  constructor(props) {
    super(props);
    this.state = {
      noOfBoxes: 16
    }
  }

  render(){
    return (
      <div>
        {for(i=0;i<this.state.noOfBoxes;i++){
           <ColorBox />
        }}
      </div>
    )
  }  
}

export default ColorBoxContainer;

3 回复 | 直到 4 年前

1

Alan Omar 4 年前

import React, { Component } from 'react';
import ColorBox from './ColorBox';

class ColorBoxContainer extends Component {

  constructor(props) {
    super(props);
    this.state = {
      noOfBoxes: 16
    }
  }

  render(){
    return (
      <div>
      { 
        Array(this.state.noOfBoxes).fill().map((_,i) =>  <ColorBox key={i}/>)
      }
      </div>
    )
  }  
}

export default ColorBoxContainer;

2

1

Yaman KATBY 4 年前

创建一个具有给定元素长度的数组,并将其映射到您的元素:

<div>
  {Array(this.state.noOfBoxes).fill().map((_, index) => (
    <ColorBox key={index} />
  ))}
</div>

3

1

Sangeet Agarwal 4 年前

return Array.from({length: this.state.noOfBoxes}, (item, index) => 
  <ColorBox />
)