Ajouter dynamicment des composants enfants dans React

Mon objective est d’append des composants dynamicment sur un composant page / parent.

J’ai commencé avec un exemple de modèle de base comme celui-ci:

main.js:

var App = require('./App.js'); var SampleComponent = require('./SampleComponent.js'); ReactDOM.render(, document.body); ReactDOM.render(, document.getElementById('myId')); 

App.js:

 var App = React.createClass({ render: function() { return ( 

App main component!

myId div
); } });

SampleComponent.js:

 var SampleComponent = React.createClass({ render: function() { return ( 

Sample Component!

); } });

Ici, SampleComponent est monté sur le nœud

, qui est pré-écrit dans le modèle App.js. Mais que faire si je dois append un nombre indéfini de composants au composant App? Évidemment, je ne peux pas avoir tous les divs requirejs assis là.

Après avoir lu certains tutoriels, je ne comprends toujours pas comment les composants sont créés et ajoutés dynamicment au composant parent. Qu’est-ce qu’une façon de le faire?

Vous devez vous passer des composants comme un enfant, comme ça …

 var App = require('./App.js'); var SampleComponent = require('./SampleComponent.js'); ReactDOM.render(   , document.body ); 

… puis ajoutez-les dans le corps du composant:

 var App = React.createClass({ render: function() { return ( 

App main component!

{ this.props.children }
); } });

Vous n’avez pas besoin de manipuler manuellement le code HTML, React le fera pour vous. Si vous souhaitez append des composants enfants, il vous suffit de changer les accessoires ou l’état, par exemple:

 var App = React.createClass({ getInitialState: function(){ return [ {id:1,name:"Some Name"} ] }, addChild: function() { // State change will cause component re-render this.setState(this.state.concat([ {id:2,name:"Another Name"} ])) } render: function() { return ( 

App main component!

{ this.state.map((item) => ( )) }
); } });

D’abord, je n’utiliserais pas document.body . Ajoutez plutôt un conteneur vide:

index.html:

    

Ensuite, choisissez de ne rendre que votre élément :

main.js:

 var App = require('./App.js'); ReactDOM.render(, document.getElementById('app')); 

Dans App.js vous pouvez importer vos autres composants et ignorer complètement votre code de rendu DOM:

App.js:

 var SampleComponent = require('./SampleComponent.js'); var App = React.createClass({ render: function() { return ( 

App main component!

); } });

SampleComponent.js:

 var SampleComponent = React.createClass({ render: function() { return ( 

Sample Component!

); } });

Vous pouvez ensuite interagir par programmation avec un nombre quelconque de composants en les important dans les fichiers de composants nécessaires à l’aide de require .

Tout d’abord un avertissement: vous ne devriez jamais bricoler avec DOM géré par React, ce que vous faites en appelant ReactDOM.render();

Avec React, vous devez utiliser SampleComponent directement dans l’application principale.

 var App = require('./App.js'); var SampleComponent = require('./SampleComponent.js'); ReactDOM.render(, document.body); 

Le contenu de votre composant est sans importance, mais il devrait être utilisé comme ceci:

 var App = React.createClass({ render: function() { return ( 

App main component!

); } });

Vous pouvez ensuite étendre le composant de votre application pour utiliser une liste.

 var App = React.createClass({ render: function() { var componentList = [ ,  ]; // Change this to get the list from props or state return ( 

App main component!

{componentList}
); } });

Je vous recommande vraiment de consulter la documentation React puis de suivre les instructions “Get Started”. Le temps que vous consacrez à cela sera rentable plus tard.

https://facebook.github.io/react/index.html

Partager ma solution ici, basée sur la réponse de Chris. J’espère que ça peut aider les autres.

J’avais besoin d’append dynamicment des éléments enfants dans mon JSX, mais d’une manière plus simple que les vérifications conditionnelles dans ma déclaration de retour. Je veux afficher un chargeur dans le cas où les éléments enfants ne sont pas encore prêts. C’est ici:

 export class Settings extends React.PureComponent { render() { const loading = (
I'm Loading
); let content = []; let pushMessages = null; let emailMessages = null; if (this.props.pushPreferences) { pushMessages = (
Push Content Here
); } if (this.props.emailPreferences) { emailMessages = (
Email Content Here
); } // Push the components in the order I want if (emailMessages) content.push(emailMessages); if (pushMessages) content.push(pushMessages); return (
{content.length ? content : loading}
) }

Maintenant, je me rends compte que je pourrais aussi mettre {pushMessages} et {emailMessages} directement dans mon return() ci-dessous, mais en supposant que mon contenu soit encore plus conditionnel, mon return() semblerait encombré.