Ajouter dynamiquement des composants enfants dans React

Question

Mon objectif est d'ajouter des composants de manière dynamique sur une page/un composant parent.

J'ai commencé par un modèle d'exemple de base comme celui-ci :

main.js :

var App = require('./App.js');
var SampleComponent = require('./SampleComponent.js');
ReactDOM.render(<App/>, document.body);
ReactDOM.render(<SampleComponent name="SomeName"/>, document.getElementById('myId'));

App.js :

var App = React.createClass({
    render: function() {
        return (
            <div>
                <h1>App main component! </h1>
                <div id="myId">myId div</div>
            </div>

        );
    }

});

SampleComponent.js :

var SampleComponent = React.createClass({
    render: function() {
        return (
            <div>
                <h1>Sample Component! </h1>
            </div>
        );
    }
});

Ici SampleComponent est monté sur <div id="myId"></div> qui est pré-écrit dans App.js modèle. Mais que faire si j'ai besoin d'ajouter un nombre indéfini de composants au composant App ? Il est évident que je ne peux pas avoir tous les divs assis là.

Après avoir lu quelques tutoriels, je n'ai toujours pas compris comment les composants sont créés et ajoutés au composant parent de manière dynamique. Quelle est la façon de procéder ?

Answer 1

Vous devez passer vos composants comme enfants, comme ceci :

var App = require('./App.js');
var SampleComponent = require('./SampleComponent.js');
ReactDOM.render(
    <App>
        <SampleComponent name="SomeName"/> 
    <App>, 
    document.body
);

Et ensuite les ajouter dans le corps du composant :

var App = React.createClass({
    render: function() {
        return (
            <div>
                <h1>App main component! </h1>
                {
                    this.props.children
                }
            </div>
        );
    }
});

Vous n'avez pas besoin de manipuler manuellement le code HTML, React le fera pour vous. Si vous voulez ajouter des composants enfants, il vous suffit de changer les props ou l'état, cela dépend. 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 (
            <div>
                <h1>App main component! </h1>
                <button onClick={this.addChild}>Add component</button>
                {
                    this.state.map((item) => (
                        <SampleComponent key={item.id} name={item.name}/>
                    ))
                }
            </div>
        );
    }

});

Answer 2

Je partage ici ma solution, basée sur la réponse de Chris. J'espère qu'elle pourra aider d'autres personnes.

J'avais besoin d'ajouter dynamiquement des éléments enfants dans mon JSX, mais d'une manière plus simple que les contrôles conditionnels dans mon instruction de retour. Je veux montrer un chargeur dans le cas où les éléments enfants ne sont pas encore prêts. Le voici :

export class Settings extends React.PureComponent {
  render() {
    const loading = (<div>I'm Loading</div>);
    let content = [];
    let pushMessages = null;
    let emailMessages = null;

    if (this.props.pushPreferences) {
       pushMessages = (<div>Push Content Here</div>);
    }
    if (this.props.emailPreferences) {
      emailMessages = (<div>Email Content Here</div>);
    }

    // Push the components in the order I want
    if (emailMessages) content.push(emailMessages);
    if (pushMessages) content.push(pushMessages);

    return (
      <div>
        {content.length ? content : loading}
      </div>
    )
}

Maintenant, je réalise que je pourrais aussi juste mettre {pushMessages} y {emailMessages} directement dans mon return() ci-dessous, mais en supposant que j'aie un contenu encore plus conditionnel, mon return() aurait juste l'air encombré.

Answer 3

D'abord, Je n'utiliserais pas document.body . Ajoutez plutôt un récipient vide :

index.html:

<html>
    <head></head>
    <body>
        <div id="app"></div>
    </body>
</html>

Choisissez alors de ne rendre que votre <App /> élément :

main.js:

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

Sur 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 (
            <div>
                <h1>App main component!</h1>
                <SampleComponent name="SomeName" />
            </div>
        );
    }
});

SampleComponent.js:

var SampleComponent = React.createClass({
    render: function() {
        return (
            <div>
                <h1>Sample Component!</h1>
            </div>
        );
    }
});

Vous pouvez ensuite interagir de manière programmatique avec un nombre quelconque de composants en les important dans les fichiers de composants nécessaires à l'aide de la fonction require .

Answer 4

Tout d'abord, un avertissement : vous ne devriez jamais manipuler le DOM qui est géré par React, ce que vous faites en appelant ReactDOM.render(<SampleComponent ... />);

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

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

Le contenu de votre composant n'est pas pertinent, mais il doit être utilisé comme ceci :

var App = React.createClass({
    render: function() {
        return (
            <div>
                <h1>App main component! </h1>
                <SampleComponent name="SomeName"/>
            </div>
        );
    }
});

Vous pouvez ensuite étendre votre composant d'application pour utiliser une liste.

var App = React.createClass({
    render: function() {
        var componentList = [
            <SampleComponent name="SomeName1"/>,
            <SampleComponent name="SomeName2"/>
        ]; // Change this to get the list from props or state
        return (
            <div>
                <h1>App main component! </h1>
                {componentList}
            </div>
        );
    }
});

Je vous recommande vivement de consulter la documentation React et de suivre les instructions "Get Started". Le temps que vous y consacrerez vous sera utile plus tard.

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