webpack代码分裂，反应不更新

Question

使用webpack代码分裂，当我改变状态时反应视图不更新。

代码：

//main.js 
export default class extends React.Component { 

    constructor(props) { 
     super(props) 
     this.state = { 
      textview: undefined, 
      text: 'text' 
     } 
    } 
    _loadText() { 
     if (!this.state.textview) 
      require.ensure([], require => { 
       const Text = require('./text').default; 
       this.setState({ 
        textview: <Text text={this.state.text} /> 
       }) 
      }) 
    } 
    render() { 
     return (
      <div> 
       <div>Main</div> 
       <button onClick={() => this._loadText()}>load</button> 
       <button onClick={() => this.setState({ text: 'change' })}>change</button> 
       {this.state.textview} 
      </div> 
     ) 
    } 
} 

//test.js 
export default class extends React.Component { 
    render() { 
     return (
      <div>{this.props.text}</div> 

     ) 
    } 
} 

当我点击Load按钮，文本组件可以加载和显示。

但是当我点击更改按钮时，文本无法更新文本值。

有没有人可以帮助我？感谢

在_loadText

Answer 1

（）

this.setState({ 
textview: Text 
}) 

渲染（）

<div> 
<div>Main</div> 
<button onClick={() => this._loadText()}>load</button> 
<button onClick={() => this.setState({ text: 'change' })}>change</button> 
{this.state.textview ? React.createElement(this.state.textview, { text: this.state.text }) : null} 

它的工作