Füge untergeordnete Komponenten in React dynamisch hinzu

Mein Ziel ist es, Komponenten dynamisch auf einer Seite/übergeordneten Komponente hinzuzufügen.

Ich begann mit einer einfachen Beispielvorlage wie dieser:

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

Hier SampleComponent montiert ist <div id="myId"></div> Knoten, der vorab eingeschrieben ist App.js Schablone. Aber was ist, wenn ich der App-Komponente eine unbegrenzte Anzahl von Komponenten hinzufügen muss? Offensichtlich kann ich nicht alle erforderlichen haben div Dort sitzen.

Nachdem ich einige Tutorials gelesen habe, habe ich immer noch kein Verständnis dafür, wie Komponenten erstellt und dynamisch zur übergeordneten Komponente hinzugefügt werden. Was ist ein Weg, es zu tun?

Sie müssen Ihre Komponenten wie folgt als Kinder übergeben:

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

Und fügen Sie sie dann in den Körper der Komponente ein:

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

Sie müssen den HTML-Code nicht manuell manipulieren, React erledigt das für Sie. Wenn Sie einige untergeordnete Komponenten hinzufügen möchten, müssen Sie nur die Requisiten ändern oder angeben, dass es davon abhängt. Zum Beispiel:

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

});

Teilen Sie hier meine Lösung, basierend auf der Antwort von Chris. Hoffe es kann anderen helfen.

Ich musste untergeordnete Elemente dynamisch an mein JSX anhängen, aber auf einfachere Weise als bedingte Prüfungen in meiner return-Anweisung. Ich möchte einen Loader zeigen, falls die untergeordneten Elemente noch nicht fertig sind. Hier ist es:

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

Jetzt ist mir klar, dass ich es auch einfach setzen könnte {pushMessages} und {emailMessages} direkt in meinem return() unten, aber vorausgesetzt, ich hätte noch mehr bedingten Inhalt, my return() würde nur unordentlich aussehen.

Zuerst, Ich würde document.body nicht verwenden. Fügen Sie stattdessen einen leeren Container hinzu:

index.html:

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

Entscheiden Sie sich dann dafür, nur Ihre zu rendern <App /> Element:

main.js:

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

Innerhalb App.js Sie können Ihre anderen Komponenten importieren und Ihren DOM-Rendercode vollständig ignorieren:

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

Anschließend können Sie programmgesteuert mit einer beliebigen Anzahl von Komponenten interagieren, indem Sie sie mithilfe von in die erforderlichen Komponentendateien importieren require.

Zunächst eine Warnung: Sie sollten niemals an DOM basteln, das von React verwaltet wird, was Sie durch Aufrufen tun ReactDOM.render(<SampleComponent ... />);

Mit React sollten Sie SampleComponent direkt in der Haupt-App verwenden.

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

Der Inhalt Ihrer Komponente ist irrelevant, aber sie sollte wie folgt verwendet werden:

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

Anschließend können Sie Ihre App-Komponente erweitern, um eine Liste zu verwenden.

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

Ich würde wirklich empfehlen, dass Sie sich die React-Dokumentation ansehen und dann den Anweisungen “Get Started” folgen. Die Zeit, die Sie dafür aufwenden, zahlt sich später aus.

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