我想添加一個子組件以回傳基于狀態值的次數ColorBox的父組件。我正在嘗試使用 for 回圈，但我猜代碼是錯誤的。有人可以幫助我，如何實作這一目標？ColorBoxContainernoOfBoxes: 16
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;
uj5u.com熱心網友回復：
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; uj5u.com熱心網友回復：
創建具有給定元素長度的陣列并將其映射到您的元素：
<div>
{Array(this.state.noOfBoxes).fill().map((_, index) => (
<ColorBox key={index} />
))}
</div>
uj5u.com熱心網友回復：
return Array.from({length: this.state.noOfBoxes}, (item, index) =>
<ColorBox />
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/411158.html
標籤：