javascript – React中的子组件应该如何以干净和可维护的方式相互通信？

我对React很新,我正在尝试理解子组件之间相互通信的简洁方法.

在一个简单的组件中,我知道我可以使用props将数据传递给子节点,并让子节点的回调将数据传递回父组件.

在稍微复杂的情况下,当我在父组件中有多个子组件时,子组件之间的通信会有点混乱.我不确定我应该为同级别的儿童组件做些什么来相互沟通.

在我的情况下,我决定,也许,我可以使用状态.所以我将在父组件中有一个状态值,并将其传递给子项的道具.类似地,父组件中的回调处理程序(从子组件调用)将有助于相应地设置状态,以便通过React的绑定将状态值从一个子节点传递到另一个子节点.

伪代码可能看起来像：

//Inside Parent Component
constructor() {
   //initialise state for the child components
   this.setState({testList: []});
}

render() {
    return (
        <div>
            <ChildA onSomething={this.onSomethingHandler} testList={this.state.testList} />
            <ChildB onSomethingElse={this.onSomethingElseHandler} testList={this.state.testList} />
        </div>
    );
}

onSomethingHandler(evt):void {
    if(blah.blah.blah) this.setState({testList: this.state.testList.splice().push(evt.value)};
}

onSomethingElseHandler(evt):void {
    //Some other complex biz logic...
    if(blah.blah.blah) this.setState({testList: this.state.testList.splice().push(somethingOtherStuffDueToLogic)};
}

//Inside ChildA Component
export IChildAProps {
    onSomething: (evt)=>void
}

render() {
    //Do some logic from the value in testList property
    if(this.state.testList == blah blah)...

    return (
        <button onClick={this.props.onSomething({id:321, value:"wassup! I'm ChildA."})}>ChildA</button>
    )
}

//Inside ChildB Component
export IChildBProps {
    onSomethingElse: (evt)=>void
}

render() {
    //Do some logic from the value in testList property
    if(this.state.testList == blah blah)...

    return (
        <button onClick={this.props.onSomething({id:123, value:"yo! I'm ChildB."})}>ChildB</button>
    )
}

在这一点上,我开始想知道2个处理程序方法中的逻辑,即Parent组件中的onSomethingHandler()和onSomethingElseHandler()是否应该实际存在于子组件本身中？我想到了这一点,因为这些逻辑看起来像子组件应该自己处理它们的目的.父组件不应该为它们执行,否则它可能会变得混乱.但我别无选择,因为我正在处理他们的沟通.除此之外,我还创建了一个新的状态,只是为了让他们进行交流.

到目前为止,这仍然是相对可控的.但是在我自己的实验中,它已进入一个阶段,我将子组件嵌套在另一个子组件中,这些子组件需要在相同(或有时不同)级别的其他子组件之间进行通信.使用状态进行交流也意味着我到处都有很多州,这对我来说并不是一个好主意.并且父组件最终得到了大量凌乱的回调处理程序方法来管理组件树上下的所有数据传播.

情况非常混乱,我最多可以将其说明为：