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} 

它的工作