Question

所以说我有一个数组

var arr=["one", "two", "three", "four"];

我有一个组件 CardContainer

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

我想做的是根据数组＆＃34; arr＆＃34;的长度/数量创建一些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组件重写为stateless functional component，如下所示：

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

如果你想要它更紧凑：

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

Answer 3

使用地图

试试

 class CardContainer extends React.Component {   
        render() {
            var arr=["one", "two", "three", "four"];

            return (
                <div> 
                {
    arr.map(function(value,i)
    {
    return <Card value={value} key={i}/>

    }  
    ) 
    }
                </div>
            );
        }
    }

Answer 4

您需要使用.map方法https://facebook.github.io/react/docs/lists-and-keys.html

render() {
    var arr=["one", "two", "three", "four"];
    return (
        <div>
         // curly braces for parenthesis
        {
           arr.map((item, index) => {
              <Card value={item} key={index} />
           });
        }
       </div>
    );
}

Answer 5

您可以尝试将数组传递给cards类，并相应地动态生成元素。

https://jsfiddle.net/69z2wepo/83859/

 class CardContainer extends React.Component {  
        constructor(props){
            super(props);
            this.props=props;
            this.arr=["one", "two", "three", "four"];
        }
        render() { 
            return (
                <div> 
                <Card arr={this.arr}/> //pass your props value
                </div>
            );
        }
    }

<强> your cards class here

class Card extends React.Component {   
    constructor(props){
        super(props);
        this.props=props; //set props value

    }
    render() {
        return (
            <div> 
            {
             // itterate through the array
             this.props.arr.map((value,index)=>(
              <div key={index}>{value}</div>
             ))
            }
            </div>
        );
    }
}

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

5 个答案:

您可以尝试将数组传递给cards类，并相应地动态生成元素。