Javascript React 根据数组的计数迭代和插入组件

React Iterate and insert components based on count of array

提问by ViVekH

So say i have an array

所以说我有一个数组

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

and i have a component CardContainer

我有一个组件 CardContainer

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

what im trying to do is create a number of Card components based on length/count of array "arr", and also set the text of the div in the Card component from the array.

我试图做的是根据数组“arr”的长度/计数创建许多卡片组件，并从数组中设置卡片组件中 div 的文本。

class Card extends React.Component {   
    render() {
        return (
            <div> 
           <!--Print arr[i] val using this.props? -->
            </div>
        );
    }
}

So my output will be 4 cards with, array values printed on each card individually.

所以我的输出将是 4 张卡片，数组值分别印在每张卡片上。

This is what ive come up with unsucessfully

这是我想出的失败的方法

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>
        );
    }
}

回答by pawel

You were close, only forgot to populate the elementsarray with the Cards, so it's still empty after the loop finishes. And while using mapas others suggest is the most idiomatic way to do it in React it still simply generates an array of components which can be generated using a forloop as well:

你很接近，只是忘了elements用卡片填充数组，所以循环完成后它仍然是空的。虽然map像其他人建议的那样使用是在 React 中最惯用的方法，但它仍然只是生成一个组件数组，这些组件也可以使用for循环生成：

https://jsfiddle.net/mn0jy5v5/

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>
        );
    }
}

回答by Chris

You almost got it right!

你几乎猜对了！

You missed the curly-braces around arr[i]. So a working code would look like:

你错过了周围的花括号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>
    );
  }
}

---

---

However I suggest you use map()to iterate through the array:

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

mapcalls a provided callback function once for each elementin an array, in order, and constructs a new array from the results

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

---

---

So try this:

所以试试这个：

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

---

---

You can then access your value inside Cardlike this:

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

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

You can also rewrite your Cardcomponent into a stateless functional component, like this:

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

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

if you want it more compact:

如果你想让它更紧凑：

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

回答by hendrixchord

You need to use .map method https://facebook.github.io/react/docs/lists-and-keys.html

您需要使用 .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>
    );
}

回答by Vikram Saini

try this using map

使用地图试试这个

 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>
            );
        }
    }

回答by Madhvesh S

You can try passing an array to the cards class and dynamically generate elements accordingly.

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

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

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

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>
        );
    }
}