cari

Rumah  >  Soal Jawab  >  teks badan

javascript - Selepas webpack membelah dan memuatkan kod, antara muka tindak balas tidak dikemas kini

Selepas pek web membelah dan memuatkan kod, antara muka reaksi tidak dikemas kini
Siarkan kod dahulu

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>

        )
    }
}

Selepas mengklik muat, kawalan teks boleh dimuatkan dan dipaparkan
Tetapi apabila mengklik tukar untuk menukar keadaan, kawalan teks tidak akan dimuatkan semula
Log cetak this.state.text telah berubah.

Saya dah lama cari tapi masih tak tahu apa masalahnya T.T
Terima kasih

黄舟黄舟2737 hari yang lalu736

membalas semua(1)saya akan balas

  • 漂亮男人

    漂亮男人2017-06-26 10:55:01

    Masalahnya terletak pada main.js _loadTexttextview: <Text text={this.state.text} />

    Cara penulisan anda sebenarnya memberitahu React bahawa apabila saya memuatkan, beri saya Text 组件,并且属性是那时候的 this.state.text (这个例子里也就是 'text' ),父组件更新的时候并不会对 this.state.textview untuk mengemas kini

    Cuma tukar macam ni

    Dalam fungsi

    _loadText (), tukar kandungan this.setState

    this.setState({
        textview: Text
    })

    fungsikan ()

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

    balas
    0
  • Batalbalas