所以说我有一个阵列
var arr=["one","two","three","four"];
我有一个组件
CardContainer
class CardContainer extends React.Component {
render() {
return (
<div>
<Card/>
</div>
);
}
}
我想要做的是
根据数组“arr”的长度/数量创建一些Card组件,
并且
从数组中设置Card组件中div的文本.
class Card extends React.Component {
render() {
return (
<div>
<!--Print arr[i] val using this.props? -->
</div>
);
}
}
所以我的输出将是4张卡,
每张卡上单独打印的数组值.
这是我提出的不成功的
class CardContainer extends React.Component {
render() {
var arr=["one","four"];
var elements=[];
for(var i=0;i<arr.length;i++){
elements.push(<Card value=arr[i]/>);
}
return (
<div>
{elements}
</div>
);
}
}
解决方法
你很接近,只是忘了用卡片填充元素数组,所以在循环结束后它仍然是空的.虽然使用map作为其他人建议是在React中最常用的方法,但它仍然只是生成一个组件数组,这些组件也可以使用for循环生成：
https://jsfiddle.net/mn0jy5v5/
class Card extends React.Component {
render() {
return (
<div>
{ this.props.value }
</div>
);
}
}
class CardContainer extends React.Component {
render() {
var arr=["one","four"];
var elements=[];
for(var i=0;i<arr.length;i++){
// push the component to elements!
elements.push(<Card value={ arr[i] } />);
}
/* the for loop above is essentially the same as
elements = arr.map( item => <Card value={ item } /> );
The result is an array of four Card components. */
return (
<div>
{elements}
</div>
);
}
}