web-dev-qa-db-fra.com

Réagissez Itérer et insérer des composants en fonction du nombre de tableaux

Alors dis que j'ai un tableau

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

et j'ai un composant CardContainer

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

ce que j'essaie de faire est de créer un nombre de composants de carte en fonction de la longueur/du nombre de tableaux "arr", de 

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

Donc, ma sortie sera 4 cartes avec les valeurs de tableau, Imprimées sur chaque carte individuellement.

C’est ce que j’ai trouvé sans succès

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>
        );
    }
}
javascriptjqueryreactjs
6
ViVekH

Vous étiez proche, vous avez seulement oublié de renseigner le tableau elements avec les cartes. Il est donc vide après la fin de la boucle. Et bien que l'utilisation de map, comme le suggèrent d'autres personnes, soit la manière la plus idiomatique de le faire dans React, elle génère tout simplement un tableau de composants pouvant être générés à l'aide d'une boucle 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>
        );
    }
}
7
pawel

Vous avez presque tout compris!

Vous avez manqué les accolades autour de arr[i]. Donc, un code de travail ressemblerait à ceci:

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

Cependant, je vous suggère d'utiliser map() pour parcourir le tableau:

map appelle une fonction de rappel fournie une fois pour chaque élément d'un tableau, dans l'ordre, et construit un nouveau tableau à partir des résultats.

Alors essayez ceci:

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

Vous pouvez alors accéder à votre valeur dans Card comme ceci:

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

Vous pouvez également réécrire votre composant Card dans un composant fonctionnel sans état , comme ceci:

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

si vous le voulez plus compact:

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

essayez ceci en utilisant la carte

 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>
            );
        }
    }
2
Vikram Saini

Vous devez utiliser la méthode .map https://facebook.github.io/react/docs/lists-and-keys.html

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

Vous pouvez essayer de passer un tableau à la classe cards et de générer dynamiquement des éléments en conséquence.

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>
        );
    }
}
1
Madhvesh S