web-dev-qa-db-fra.com

Utiliser des boucles for et changer de casse dans React pour restituer dynamiquement différents composants

J'essaie de rendre les composants de manière conditionnelle à l'aide de la casse de commutateur dans React JSX. J'essaie de construire quelque chose qui lit une structure JSON spécifique et restitue les données. Puisqu'il peut y avoir de nombreux composants et données différents , J'essaie de le rendre dynamiquement. Voir le code ci-dessous, je ne reçois aucune erreur, mais les composants ne sont pas restitués. À l'intérieur de mon code HTML, je ne peux que voir. Cela signifie que la boucle ne fonctionne pas. J'ai essayé d'utiliser la même boucle dans Vanilla JS et ça marche.

var myPackage = [{
    sectionInfo:[{
        elementType: 1,
        text: "This is text from element type 1"
    }]
},
{
    sectionInfo:[{
        elementType: 2,
        text: "This is text from element type 2"
    }]
}];
var App = React.createClass({

    render: function(){
        var elements = [];
        elements = myPackage.map(function(myObj){
            myObj.sectionInfo.map(function(myObj1){
                switch(myObj1.elementType){
                    case 1: return(
                                <Component1 text = {myObj1.text}/>
                            );
                            break;
                    case 2: return(
                                <Component2 text = {myObj1.text}/>
                            )
                            break;      
                }
            })
        });
        return(
            <div className="App">
                {elements}
            </div>
        )
    }
});
var Component1 = React.createClass({
    render:function(){
        return(
            <div className = "element1">
                {this.props.text}
            </div>
        )
    }
});
var Component2 = React.createClass({
    render:function(){
        return(
            <div className = "element2">
                {this.props.text}
            </div>
        )
    }
});
ReactDOM.render(<App/>,document.getElementById('container'));

Edit: Quelques ajouts au code, et maintenant je suis confronté à un nouveau problème. Voici le nouveau code:

var App = React.createClass({

        render: function(){
            var elements = [];
            elements = myPackage.map(function(myObj){
                return(
                       <div>
                           myObj.sectionInfo.map(function(myObj1){
                           switch(myObj1.elementType){
                           case 1: return(
                                    <Component1 text = {myObj1.text}/>
                                );
                                break;
                           case 2: return(
                                    <Component2 text = {myObj1.text}/>
                                )
                                break;      
                        }
                        }
                  </div>
                )
                });
        return(
            <div className="App">
                {elements}
            </div>
        )
    }
});

Je veux rendre chaque fois à l'intérieur d'une div. Ainsi, si une section comporte plus de 3 éléments, tous les 3 doivent être à l'intérieur d'une div.

loopsreactjsswitch-statementreact-jsx
30
Vishnu Paspunoor

Vous devriez retourner la valeur du premier .map, Dans votre cas, il s'agit du résultat de l'intérieur .map

var elements = myPackage.map(function(myObj){
  return myObj.sectionInfo.map(function(myObj1) {
     // ...  
  });
});

Mise à jour:

En fonction de votre nouvelle mise à jour, vous pouvez modifier votre code comme suit

var App = React.createClass({

  section: function(myObj, parentIndex) {
    return myObj.sectionInfo.map(function(myObj1, index) {
      const key = parentIndex + '.' + index;

      switch(myObj1.elementType) {
        case 1:
          return <Component1 text = {myObj1.text} key={ key } />
        case 2:
          return <Component2 text = {myObj1.text} key={ key } />
      }
    });
  },

  render: function() {
    var elements = myPackage.map(function(myObj) {
      return <div>
        { this.section(myObj, index) }
      </div>
    }, this);

    return <div className="App">
     { elements }
    </div>;
  }
});
20
Alexander T.

Pour effectuer une commutation dans JSX, procédez comme suit:

   {{
    sectionA: (
      <SectionAComponent />
    ),
    sectionB: (
      <SectionBComponent />
    ),
    sectionC: (
      <SectionCComponent />
    ),
    default: (
      <SectionDefaultComponent />
    )
  }[section]}
70
Oliv

pour la nouvelle fonction inline/not created, vous pouvez utiliser cette méthode

<div>
    {(() => {
        switch (myObj1.elementType) {
            case 'pantulan':
                return <Component1 text = {myObj1.text} key={ key } />
            default :
                null
        }
    })()}
</div>
50
yussan

Manière recommandée par React: React Docs

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // Correct! JSX type can be a capitalized variable.
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}
7
Hariharan L

Il vous manque un retour comme indiqué dans le réponse de Alexander T , mais je vous recommanderais également d'ajouter une clé à chacun de vos éléments. React dépend de cette valeur pour son algorithme différent, vous pouvez faire quelque chose comme:

render: function(){
  var elements = myPackage.map(function(myObj, pIndex){
    return myObj.sectionInfo.map(function(myObj1, sIndex){
      var key = pIndex + '.' + sIndex;            
      switch(myObj1.elementType) {
        case 1: return(
          <Component1 key={key} text={myObj1.text}/>
        );
        case 2: return(
          <Component2 key={key} text={myObj1.text}/>
        )
      }
    })
  });
  return(
    <div className="App">
      {elements}
    </div>
  )
}

Lisez ici pour plus d'infos: https://facebook.github.io/react/docs/multiple-components.html#dynamic-children

4
ctrlplusb