Как динамически добавить компонент в React?

Question

[Masterstvo]

Добрый день!

Уважаемые знатоки, подскажите пожалуйста каким образом можно динамически добавить React-компонент?

Скажем, стоит событие onclick на компоненте или его потомках. Нужно добавить новый компонент дочерним элементом в уже существующий компонент. appendChild не подходит, так как используется JSX и эта функция не может принимать объект в качестве аргумента. То есть, нужно по сути описать функцию appChild в примере ниже, ну или решить это как то еще!

Буду благодарен за помощь!

import React from 'react';
import ReactDOM from 'react-dom';
import Month from './Month';
import Content from './Content';

function appChild(){

}

ReactDOM.render(
        <div>
            <Month />
                   <div onClick='this.appChild.bind(this)'></div>
            <Content />
        </div>,
  document.getElementById('root')
);

Comments

[Михаил Плюснин]

если я правильно понимаю, то вы можете передать ваш динамический компонент через props.

Answer 1

[Никита Гущин]

Сделайте под это дело отдельный компонент. Никаких appChild - это реакт.

class MyClickableComponent extends React.PureComponent {
  construct(props, context) { 
    super(props, context)

    this.state = {
      isOpen: false,
    }
  }

  handleClick = e => {
    this.setState({ isOpen: true })
  }

  render() {
   const { isOpen } = this.state

    return (
      <div>
        <div onClick={this.handleClick }>click on me</div>
        {isOpen && (
          <b>opened!</b>
        )}
      </div>
    )
  }
}

ReactDOM.render(
        <div>
            <Month />
                   <MyClickableComponent  />
            <Content />
        </div>,
  document.getElementById('root')
);

Comments

[Masterstvo]

Никита Гущин, может я чего то не допонял, и все же как сделать так чтобы изначально в React.DOM.render (или в методе render конкретного компонента) этого компонента совсем не было и он появлялся при определенных условиях. В Вашем примере он рендерится все равно (пусть и частично). В моем реальной задаче, в компоненте <Month /> , должно появляться popup окно, реализацию которого я хочу вынести в новый компонент. При клике на одном из дочерних элементов компонента <Month />, этот новый компонент должен добавляться в DOM. Ниже мой компонент и попыткой использовать ReactDOM.render. И это естественно не лучшее решение, т.к. компонент полностью перерисовывается и возникают проблемы с использованием библиотеки react-redux

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import Popup from './Popup';
import './App.css';

class Month extends Component {
    leftToggle(){
        this.props.clickLeftToggle();
    }
    rightToggle(){
        this.props.clickRightToggle();
    }
    popUpMonth(){
        ReactDOM.render(
        <Popup />,
        document.getElementById('month')
        );
    }
    render() {
        let date = new Date(this.props.testStore.year, this.props.testStore.month).toLocaleString('ru', { year: 'numeric', month: 'long'});
        return (
            <div className="Month">
                <div className='leftToggle' onClick={this.leftToggle.bind(this)}>◄</div>
                <span onClick={this.popUpMonth.bind(this)} id='month'>{date}</span>
                <div className='rightToggle' onClick={this.rightToggle.bind(this)}>►</div>
            </div>
        );
    }
}

export default connect(
    state => ({
        testStore: state
    }),
    dispatch => ({
        clickLeftToggle: () => {
            dispatch({type: "LEFTTOGGLE", amount: 1});
        },
        clickRightToggle: () => {
            dispatch({type: "RIGHTTOGGLE", amount: 1});
        },
    })
)(Month);

[Никита Гущин]

ReactDOM.render нужно вызывать 1 раз при начальном рендере приложения. В моем примере под компонентом, который рендерится по клику я имел ввиду
<b>opened!</b>

Если флаг isOpen === false, тогда надписи opened не будет. MyClickableComponent в этом случае - контейнер: вам же где-то нужно хранить state, теоретически можете использовать redux для хранения этого флага, но я не реккомендую (т.к. в редаксе надо хранить глобальный стейт приложения, а этот флаг используется только внутри одного компонента)

[Masterstvo]

спасибо, теперь вроде понял!

Answer 2

[Максим]

Google сразу выдает порядком вопросов, но в общем случае, если речь идет об однотипных компонентах, вот хороший ответ. Суть в нем сводится в том, что вы рендерите компоненты, на основе данных в state (это можеть бы так же и props, пришедшие из родителя..).

(перевел главный кусок с ответа по ссылке выше)

// ...
// SampleComponent - ваш однотипный компонент
// ...

class Test extends Component {
    constructor(props) {
        super(props)
        this.addChild = this.addChild.bind(this)
        this.state = {
            components: [
                {
                    id:1, name: 'Some Name'
                }
            ]
        }
    }

    addChild() {
        // Изменение стейта спровоцирует перерисовку
        this.setState(this.state.concat([
            {id:2,name:"Another Name"}
        ]))
    }
    render() {
        return (
            <div>
                <h1>App main component! </h1>
                <button onClick={this.addChild}>Add component</button>
                { // здесь будет отрисовано необходимое кол-во компонентов
                    this.state.components.map((item) => (
                        <SampleComponent key={item.id} name={item.name}/>
                    ))
                }
            </div>
        );
    }
}