首页 >社区问答列表 >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 (
            <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
拜谢

  • 漂亮男人
  • 漂亮男人    2017-06-26 10:55:011楼

    问题出在 main.js 中 _loadTexttextview: <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>

    +0添加回复

  • 回复