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/