Async React.Component 对我不起作用

Question

我想按块拆分我的 React 应用程序并且遇到了一个问题。 React.Component 不渲染通过 require.ensure 加载的子 React.Component。下面的示例代码。
档案一：

let Child;
class Parent extends React.Component {
  constructor() {
      super();
      require.ensure(['child'], () => {
        Child = require('child');
      });
  }
  render() {
    return (
      <div>
        {!!Child && <Child/>}
      </div>
    );
  }
}

文件二

class Child extends React.Component {
  render() {
    return <div>hello world</div>;
  }
}

module.exports = Child;

然后我检索到下一个错误：

未捕获的错误：缩小的 React 错误 #130；访问 http://facebook.github.io/react/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= 获取完整信息或使用非缩小开发环境获取完整信息 错误和其他有用的警告。

谁能告诉我我做错了什么？

Answer 1

1. 我建议您在加载依赖项时向 React 提供某种形式的内容。我会推荐某种加载消息。

2. 您需要确保在加载完成后重新渲染组件。完成此操作的最简单方法是将require 调用的结果存储在组件状态中，而不是全局中。

例如，您的代码可能如下所示：

class Parent extends React.Component {
  constructor() {
      super();
      require.ensure(['child'], () => {
        this.setState({Child: require('child')});
      });
  }
  render() {
    return (
      <div>
        {'Child' in this.state ? <this.state.Child/> : "Loading..."}
      </div>
    );
  }
}

Answer 2

我可以建议你使用 es6 sintax，并设置 process.env.NODE_ENV === 'dev' 有关错误和警告的更多有用消息

如果你使用 webpack，试试这个webpack-dev-server

文件一

import { Component } from 'react'
import Child from './Child'

class Parent extends Component {
  constructor() {
    super()
  }
  render() {
    return (
      <Child/>
    )
  }
}

文件两个“Child.jsx”

import { Component } from 'react'

class Child extends Component {
  render() {
    return (
      <div>Hello World</div>
    )
  }
}

export default Child

Answer 3

在 dev 中安装 babel-pollyfill 并在你的 webpack 配置中添加这一行

entry: [
    'babel-polyfill',
    './src/index'
  ],