javascript - webpack 分割加載代碼后,react 界面不更新

問題描述

webpack 分割加載代碼后,react 界面不更新. 先貼代碼

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 ( <p><p>Main</p><button onClick={() => this._loadText()}>load</button><button onClick={() => this.setState({ text: ’change’ })}>change</button>{this.state.textview} </p>) }}

text.js

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

點擊load后能加載text控件并顯示 但是點擊change改變state時text控件并不會刷新， 打印日志this.state.text已經改變了。

找了n久也不知道問題在哪，求大神T.T 拜謝

問題解答

問題出在 main.js 中 _loadText 的 textview: <Text text={this.state.text} /> 上

你的這種寫法，實際上是告訴 React，當我 load 的時候，給我一個 Text 組件，并且屬性是那時候的 this.state.text （這個例子里也就是 ’text’ ），父組件更新的時候并不會對 this.state.textview 進行更新

下面這么改就可以了

_loadText () 函數中，改變 this.setState 的內容

this.setState({ textview: Text})

render () 函數中

<p> <p>Main</p> <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}</p>