Динамічно додавати дочірні компоненти в React

Question 1

Моя мета - додавати компоненти динамічно на сторінку / батьківський компонент.

Я почав з базового прикладу шаблону, подібного до цього:

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

Тут SampleComponentмонтується <div id="myId"></div>вузол, який попередньо записаний у App.jsшаблон. Але що, якщо мені потрібно додати невизначену кількість компонентів до компонента програми? Очевидно, я не можу мати там усіх необхідних div .

Після прочитання деяких підручників я все ще не розумію, як компоненти динамічно створюються та додаються до батьківського компонента. Який спосіб це зробити?

Question 2

Вам потрібно передавати свої компоненти в дитинстві, наприклад:

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

А потім додайте їх до корпусу компонента:

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

Вам не потрібно маніпулювати вручну HTML-кодом, React зробить це за вас. Якщо ви хочете додати деякі дочірні компоненти, вам просто потрібно змінити реквізит або вказати, що це залежить. Наприклад:

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

});

Question 3

По-перше, я б не використовував document.body . Натомість додайте порожній контейнер:

index.html:

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

Потім виберіть лише візуалізацію вашого <App />елемента:

main.js:

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

Усередині App.jsви можете імпортувати інші компоненти та повністю ігнорувати код візуалізації 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>
        );
    }
});

Тоді ви можете програмно взаємодіяти з будь-якою кількістю компонентів, імпортуючи їх у необхідні файли компонентів за допомогою require.

Question 4

Поділюсь своїм рішенням тут, на основі відповіді Кріса. Сподіваюся, це може допомогти іншим.

Мені потрібно було динамічно додавати дочірні елементи до мого JSX, але простіше, ніж умовні перевірки в моєму операторі повернення. Я хочу показати завантажувач на випадок, якщо дочірні елементи ще не готові. Ось:

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

Тепер я усвідомлюю, що я міг би просто помістити це {pushMessages}і {emailMessages}прямо в свій return()нижче, але припускаючи, що я маю ще більше умовного змісту, мій return()би просто виглядав захаращеним.

Question 5

По-перше, попередження: ви ніколи не повинні займатися DOM, яким керує React, що ви робите за допомогою дзвінка ReactDOM.render(<SampleComponent ... />);

З React вам слід використовувати SampleComponent безпосередньо в головному додатку.

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

Вміст вашого Компонента не має значення, але його слід використовувати так:

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

Потім ви можете розширити компонент програми, щоб використовувати список.

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

Я справді рекомендую вам переглянути документацію React, а потім слідувати інструкціям "Почати". Витрачений на це час окупиться пізніше.

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