reactjs - React组件的动态加载

Question

我需要动态加载 react 组件。

我从用户处获取要作为字符串加载的组件名称。我正在使用webpack。

如何动态加载组件而不是使用静态导入语句。似乎 Require.Ensure 不计算表达式。我想要实现的就是这样的。

require.ensure([ "./widgets/" + componentName ] ,(require) => {
    let Component = require("./widgets/" + componentName);   
});

但这似乎不起作用。

Answer 1

基本上，它可以归结为预先创建您需要的所有 block 。那么你只需要一种动态引用它们的方法。这是我基于的解决方案:

http://henleyedition.com/implicit-code-splitting-with-react-router-and-webpack

这是我所做的，因为我不使用 React Router(旁注:我发现它不太适合 redux 或动画):

//loader:
{
  test: (folder)\/.*\.js,
  include: path.resolve(__dirname, 'src')
  loader: ['lazy?bundle', 'babel']
}

//dynamic usage within React component:
const My_COMPONENTS = {
   ComponentA: require('./folder/ComponentA'),
   ComponentB: require('./folder/ComponentB'),
}

class ParentComponent extends React.Component {
    componentDidMount() {
        My_COMPONENTS[this.props.name](component => this.setState({component}));
    } 
    render() {
       return <this.state.component />;
    }
}

因此，结果是您正在动态渲染组件，但从一组静态的预先确定的可能性中进行渲染 - 同时，只向客户端发送不超过访问者实际感兴趣的 block 。

另外，这是我拥有的一个可以很好地做到这一点的组件:

import React from 'react';
import Modal from './widgets/Modal';

export default class AjaxModal extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      Content: null
    };
  }

  componentDidMount() {
    if(this.props.show) {
      this.loadContent();
    }
  }

  componentWillReceiveProps({show}) {
    if(show && !this.state.Content) {
      this.loadContent(1200); //dont interfere with animation
    }
  }

  loadContent(ms=0) {
    setTimeout(() => {
      this.props.requestLazyBundle(({default: Content}) => {
        this.setState({Content});
      });
    }, ms);
  }

  render() {
    let {Content} = this.state;

    return (
      <Modal title={this.props.title} {...this.props} loading={!Content}>
        {Content ? <Content /> : null}
      </Modal>
    );
  }
}

将异步 require bundler 函数传递为 this.props.requestLazybundle，如下所示:

render() {

  let requestLazyBundle = require('bundle?lazy&name=AnotherComponent!../content/AnotherComponent');

  return (
    <AjaxModal title='Component Name' {...props} requestLazyBundle={requestLazyBundle} />
  );
}