React 组件 A 通知组件 B 更新视图

Question

现在有两个组件 A 和 B

这两个组件的内容是完全相同的, A 里面是我喜欢的, B 里面是我不喜欢的

由于内容,结构相同,我共用一个组件写的.但是内容是互斥的

A 组件中选中了 a 那么在 B 组件中就不能选择 a

在组件中可以点击状态为 0 选中状态为 1 不可点击状态为 2

现在我选中了 A 中的 a 也将 B 中的 a 设置成了 2,但是 B 组件并不知道这时候需要更新来显示 B 中的 a 是不可点击的,能实现么?

Answer 1

这样的效果肯定是能实现的，首先如果不使用redux的话你定义两个组件A和B，后可以再定义一个父级P的组件来封装A和B,这样在P中给它一个状态

class P extends React.Component {
    constructro(props) {
        super(props);
        this.state = {
            value: 0
        }
    }
    onChangeValue(value) {
        //这里写当state中的value改变时对应如何处理
    }
    
    render()//方法
}

接着你可以把P中的value传递到A和B组件中，这样传递

<A value=this.state.value onChangeCallback=onChangeValue/>，

<B value=this.state.value/>

接着你在A中如果value改变就调用this.props.onChangeCallback(newValue)方法通知父级组件value改变了，
然后在B中使用componentWillReceiveProps(nextProps)函数当父级的value改变时就执行对应的方法对B中的状态进行改变设置，说得比较不系统，你可以看一看我写的文章，里面有讲

我的文章：https://segmentfault.com/a/11...

Answer 2

提升一个上层父组件，里面有个state控管，A与B个别为子组件。大概流程如下:

A中触发a值为1->触发上层组件setState状态设定为: 为A被选中，设定B此时不能被选中->重渲染