在一个组件的状态改变时重新渲染第二个组件

知乎
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)
}
舒巴姆·哈特里

您也需要setStatecomponentWillReceiveProps函数中的第二个组件构造函数仅在初始渲染时调用,并且状态不应仅在构造函数中分配,如果它依赖于道具

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如果前一个自终止,Vue不会渲染第二个组件

Angular / TypeScript,当使用多个组件时,第一个组件会影响第二个组件

由于第二个同级组件的更改,如何重新呈现一个同级组件

React:在第一个功能组件被更新时呈现第二个功能组件

第二个组件的角度解析引用到第一个组件

当 url 调用第二个组件时,如何将 props 从当前组件传递到另一个组件?

即使状态没有改变,React 组件在重新渲染时也会创建一个新的状态实例

当第一个组件的状态发生变化时,防止在第二个组件上呈现

如何根据第一个组件收到的websocket事件更新第二个组件中的内容?

如何使用第二个组件在第一个组件之间共享ajax结果?

如何基于pickerview中的第一个组件选择更改第二个pickerview组件?

使用Android导航组件从第一个活动导航到第二个活动时如何关闭/完成第一个活动

当第二次单击时状态没有改变时组件重新渲染

为什么一个值改变但第二个值没有改变?

渲染第二个反应组件后暂停 GSAP 动画

同一个方法改变两个状态,一个变第二个不,为什么?

从NGRX / RXJS中的组件完成第一个操作后,调度第二个操作

Angular 2-从“第一个子组件”到父组件的“第二个子组件”的路由

组件 prop 在一个 Vuex 状态改变时被重新评估

将变量移至第二个组件并保存状态

React组件仅在第二个onClick事件上更改状态

打开第二个JFrame,组件不显示

第二个JFrame中的组件未显示

如何使用UIPickerView设置第二个组件

React Hooks 第二个组件

当第一个标签处于活动状态时,第二个则不起作用

仅更新一个状态变量时,所有组件都会重新渲染

如何在第二个组件中特定行的开始之前不显示 UIPickerView 的第一个组件中的数据?

UIPickerView,其中所选的第一个组件确定第二个组件的内容不同步