Question

使用webpack代码拆分，当我改变状态时，反应视图不是updata。

代码：

//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>
        )
    }
} 

//test.js
export default class extends React.Component {
    render() {
        return (
            <div>{this.props.text}</div>

        )
    }
}

当我单击加载按钮时，Text组件可以加载并可见。

但是当我点击更改按钮时，文本无法更新文本值。

有没有人可以帮助我？感谢

Answer 1

_loadText（）

中的

this.setState({
textview: Text
})

渲染（）

<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}

有效

webpack代码拆分，反应不更新

1 个答案: