为什么这反应组件，导入System.import，不渲染？

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 
    } 
} 

然而，当我安装它，它返回以下错误：

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的渲染功能，结果如下：

那么什么错吗？看起来好像我得到了有效的反应组件，那为什么它会抛出一个错误？

Answer 1

你正在返回组件类，当你应该实际上是返回从那个类创建的元素。他们不是一回事！

// Replace this: 

render() { 
    return this.state.component 
} 

// With this: 

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

// Or this: 

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

Answer 2

我想你一定包裹内{}​​和<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 
    ) 
    } 

} 

的创建一个元素