为什么这个用 System.import 导入的 React 组件不渲染？

Question

我正在尝试使用 webpack 2 实现动态代码拆分并做出反应。为了进行测试，我创建了一个异步提取代码的组件：

import React, { Component } from 'react'

export class Async extends Component {
  constructor(props) {
    super(props)
    this.state = { component: <div>Loading</div> }
  }

  componentDidMount() {
    System.import('../../about')
      .then(component => this.setState({ component: component.About }))
      .catch(error => this.setState({ component: <div>{error.message}</div> }))
  }

  render() {
    return this.state.component
  }
}

然而，当我安装它时，returns出现以下错误：

Async.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

将 console.log(this.state.component) 放入 Async 的渲染函数中会产生以下结果：

那么这里出了什么问题？我似乎得到了有效的 React 组件，为什么会抛出错误？

Answer 1

我认为你必须将 this.state.component 包装在 {} 和 <div> 中，这就是错误所在

您需要从组件中创建一个元素

class Async extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      component: React.createElement('div', {}, "loading")
    }
  }
  render() {
    return (
      this.state.component
    )
  }

}

ReactDOM.render(<Async/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script>
<div id="app"></div>

class Async extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      component: React.createElement('div', {}, "loading")
    }
  }
componentDidMount() {
    System.import('../../about')
      .then(component => this.setState({ component: React.createElement(component.About) }))
      .catch(error => this.setState({ component: React.createElement('div', {}, error.message) }))
  }
  render() {
    return (
      this.state.component
    )
  }

}

Answer 2

您返回组件 class，而实际上您应该返回从 class 创建的元素。它们不是一回事！

// Replace this:

render() {
    return this.state.component
}

// With this:

render() {
    return <this.state.component />
}

// Or this:

render() {
   return React.createElement(this.state.component)
}

为什么这个用 System.import 导入的 React 组件不渲染？

Why does this react component, imported with System.import, not render?

javascript

reactjs

webpack

webpack-2

es6-modules