javascript - webpack 分割加载代码后,react 界面不更新
本文介绍了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 (
<div>
<div>Main</div>
<button onClick={() => this._loadText()}>load</button>
<button onClick={() => this.setState({ text: 'change' })}>change</button>
{this.state.textview}
</div>
)
}
}
text.js
export default class extends React.Component {
render() {
return (
<div>{this.props.text}</div>
)
}
}
点击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 () 函数中
<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}
</div>
这篇关于javascript - webpack 分割加载代码后,react 界面不更新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文