Component A
this.state = {
    x: 1,
    y: 2
}

reset () {
    this.setState ({
        x: 3,
        y: 5
    })
}


render () {
    <B x = {this.state.x} y = {this.state.y} onClick = {this.reset.bind(this)}/>
}


================================================== ======

Component B

this.state = {
    z: someMethod()
}

someMethod () {
    return this.props.x + this.props.y
}


在Click上,我正在调用reset方法并更新组件A的状态,但是如何重新呈现组件B。现在,它不更新组件B。

Tried with

componentWillReceiveProps (nextProps) {

    this.constructor(nextProps)
}

最佳答案

您还需要在setState函数中将componentWillReceiveProps用于第二个组件。构造函数仅在初始渲染上被调用,如果状态取决于prop,则不应仅在构造函数中分配状态

componentWillReceiveProps (nextProps) {

    this.setState({z: nextProps.x + nextProps.y})
}


如果你想使用someMethod就像

someMethod(props) {
     props? return props.x + props.y : return this.props.x + this.props.y
}


然后在componentWillReceiveProps中

 componentWillReceiveProps (nextProps) {
    var z = someMethod(nextProps)
    this.setState({z})
}

关于javascript - 在一个组件的状态更改时,重新渲染第二个组件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44470148/

10-09 15:24
查看更多