javascript - webpack 分割載入程式碼後,react 介面不更新
黄舟
黄舟 2017-06-26 10:53:01
0
1
660

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
拜謝

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回覆 (1)
漂亮男人

問題出在 main.js 中_loadTexttextview:

你的這種寫法,實際上是告訴React,當我load 的時候,給我一個Text元件,並且屬性是那時候的this.state.text(這個例子裡也就是'text' ) ,父元件更新的時候並不會對this.state.textview進行更新

下面這麼改就可以了

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

this.setState({ textview: Text })

render () 函數中

Main

{this.state.textview ? React.createElement(this.state.textview, { text: this.state.text }) : null}

    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!