如何在reactjs中動態加載組件？

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

您可以輕松實現這一目標。 在此示例中，我將基於prop動態渲染組件：

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

在您的情況下，您可能希望使用內部組件狀態來安裝或卸載組件。

僅供參考，在某些情況下，您可能更喜歡或需要使用樣式來隱藏組件而不是破壞它們。 React文檔中有更多有關此的內容。 請參閱此處的“有狀態的孩子”部分： 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;