Как динамически загрузить Компонент в реагировать?

Question

Я работаю над проектом Reactjs + React-motion, в "модальном окне" (скажем), я бы хотел монтировать или загружать компонент динамически, если это возможно?

Мое решение до сих пор: я не смог найти способ, поэтому кажется, что легче разместить компонент на месте и скрыть его, затем переключить класс или стиль при изменении состояния, открывая скрытый компонент и только после "модального" окно "Переход заканчивается".

Ниже приведен код, где легче понять, что я пытаюсь сделать. Там нет обработчиков событий, и большая часть кода была удалена, но onRest (обратный вызов события, когда анимация заканчивается), а также рендер fn.

class HomeBlock extends React.Component {

    constructor (props) {
        ...

    }

    ...

    motionStyleFromTo () {

        return {
            ...
        };

    }

    onRest () {

        // this is triggered when the Motion finishes the transition

    }

    render () {

        return (
            <Motion onRest={this.onRestCallback.bind(this)} style={this.motionStyleFromTo()}>
                {style =>
                    <div className="content" style={{
                        width: `${style.width}px`,
                        height: `${style.height}px`,
                        top: `${style.top}px`,
                        left: `${style.left}px`
                        }}>
                        [LOAD COMPONENT HERE]
                    </div>
                }
            </Motion>
        );

    }

}

export default HomeBlock;

Answer 1

Вы можете достичь этого довольно легко. В этом примере я рендеринг компонента динамически на основе проп:

class MyComponent extends React.Component {
  propTypes: {
    display: React.PropTypes.bool
  },
  render() {
    return (
       <div>
         {this.props.display ? <ChildComponent /> : null}
       </div>
    )
  }
}

В вашем случае вы можете использовать внутреннее состояние компонента для монтирования или размонтирования компонента.

К вашему сведению, в некоторых случаях вы предпочитаете или должны использовать стиль, чтобы скрыть компоненты, а не уничтожать их. Об этом есть больше в документации React. Смотрите раздел "Stateful Children" здесь: https://facebook.github.io/react/docs/multiple-components.html

Answer 2

Вы можете сделать это с помощью внедрения зависимостей и концепции контейнера зависимостей. Я предоставил пример кода на этой странице

https://gist.github.com/SamanShafigh/a0fbc2483e75dc4d6f82ca534a6174d4

Итак, предположим, у вас есть 4 компонента, которые называются D1, D2, D3. Вам нужно создать механизм внедрения зависимостей и механизм контейнера зависимостей. Это очень простая реализация

Представьте, что у вас есть такой конфигурационный файл, который определяет ваши компоненты

export default [
  {
    name:'D1',
    path:'D1'
  },
  {
    name:'D2',
    path:'D2'
  },
  {
    name:'D3',
    path:'D3'
}];

Тогда вы можете иметь контейнер компонента примерно так

import componentsConfig from 'ComponentsConfig';

let components = {};

for (var i = 0; i < componentsConfig.length; i++) {
  let componentConfig = componentsConfig[i];
  // Check if component is not already loaded then load it
  if (components[componentConfig.name] === undefined) {
    components[componentConfig.name] = require(`${componentConfig.path}`).default;
  }
}

export default components;

Наконец, в том месте, где вы хотите загрузить свои компоненты, вы можете использовать контейнер компонентов для динамической загрузки ваших компонентов или, другими словами, вы можете внедрить свои компоненты

import React, { Component } from 'react';
import ComponentContainer from './ComponentContainer';

class App extends Component {
  render() {
    let components = ['D1', 'D2', 'D3'];

    return (
      <div>
        <h2>Dynamic Components Loading</h2>
        {components.map((componentId) => {
          let Component = ComponentContainer[componentId];
          return <Component>{componentId}</Component>;
        })}
      </div>
    );
  }
}

export default App;