如何在reactjs中动态加载组件？

IT技术 javascript reactjs react-motion
2021-04-26 19:56:23

我正在研究 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;
2个回答

你可以很容易地做到这一点。在这个例子中，我基于 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

您可以使用依赖注入和依赖容器概念来做到这一点。我在这个要点页面上提供了一些示例代码

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;
其它你可能感兴趣的问题
上一篇一旦热端达到熔点，长丝就开始挤出 下一篇`render` 函数可以用来加速渲染吗？