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>