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: }) }) } render() { return (
Main
{this.state.textview} ) } }
text.js
#export default class extends React.Component { render() { return ( {this.props.text}
) } }
點選load後能載入text控制項並顯示
但點選change改變state時text控制項不會刷新,
列印日誌this.state.text已經改變了。
找了n久也不知道問題在哪,求大神T.T
拜謝
問題出在 main.js 中
_loadText
的textview:
上你的這種寫法,實際上是告訴React,當我load 的時候,給我一個
Text
元件,並且屬性是那時候的this.state.text
(這個例子裡也就是'text' ) ,父元件更新的時候並不會對this.state.textview
進行更新下面這麼改就可以了
_loadText () 函數中,改變
this.setState
的內容render () 函數中