React迭代并根据数组的数量插入组件

Question

所以说我有一个阵列

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", "two", "three", "four"];
        var elements=[];
        for(var i=0;i<arr.length;i++){
            elements.push(<Card value=arr[i]/>);
        }
        return (
            <div> 
            {elements}
            </div>
        );
    }
}

Answer 1

你很接近,只是忘了elements用卡填充数组,所以在循环结束后它仍然是空的.虽然使用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", "two", "three", "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>
        );
    }
}

Answer 2

你几乎猜对了！

你错过了周围的花括号arr[i]。所以一个工作代码看起来像：

class CardContainer extends React.Component {   
  render() {
    var arr=["one", "two", "three", "four"];
    var elements=[];
    for(var i=0;i<arr.length;i++){
      elements.push(<Card value={arr[i]} />);
    }
    return (
      <div> 
        {elements}
      </div>
    );
  }
}

但是我建议您使用map()遍历数组：

map为数组中的每个元素依次调用一次提供的回调函数，并根据结果构造一个新数组

所以试试这个：

class CardContainer extends React.Component {
  render() {
    var arr=["one", "two", "three", "four"];  
    return (
      <div> 
        {arr.map(item => <Card key={item} value={item} />)}
      </div>
    );
  }
}

然后你可以Card像这样访问你的值：

class Card extends React.Component {   
  render() {
    return (
      <div> 
        {this.props.value}
      </div>
    );
  }
}

您还可以将Card组件重写为无状态功能组件，如下所示：

const Card = (props) =>   
  return (
    <div> 
      {props.value}
    </div>
  );
}

如果你想让它更紧凑：

const Card = props => <div>{props.value}</div>