Javascript React组件在不同DOM节点中的交互性（并行）

我有类似的情况：

<div className="container">
    <div>
        <PermissionsTable \>
    </div>
    <div>
        <input type="button" value="Save Changes" readOnly />
    </div>
</div>

---

我试图通过使用引用来实现这一点，虽然引用部分起作用，但我无法完全控制整个系统，因为它与来自子组件的各种函数引用变得非常混乱。

可能是这样的

class PermissionTableArea extends Component {
    constructor(props) {
        super(props)
        this.state={
            data
        }
    }

    handleClickButton= () => {
        let data = this.state.data;
        this.setState({data: setNonDirty(data)}
    }

    render() {
        return(
            <div className="container">
                <div>
                    <PermissionsTable data={this.state.data} />
                </div>
                <div>
                    <input 
                        type="button" 
                        value="Save Changes" 
                        onClick={this.handleClickButton}
                        readOnly={isDirty(this.state.data)} 
                    />
                </div>
            </div>
        )
    }
}

class PermissionTableArea扩展组件{
建造师（道具）{
超级（道具）
这个州={
数据
}
}
handleClickButton=（）=>{
让data=this.state.data；
this.setState（{data:setNonDirty（data）}
}
render（）{
返回(
)
}
}

可能是这样的

class PermissionTableArea extends Component {
    constructor(props) {
        super(props)
        this.state={
            data
        }
    }

    handleClickButton= () => {
        let data = this.state.data;
        this.setState({data: setNonDirty(data)}
    }

    render() {
        return(
            <div className="container">
                <div>
                    <PermissionsTable data={this.state.data} />
                </div>
                <div>
                    <input 
                        type="button" 
                        value="Save Changes" 
                        onClick={this.handleClickButton}
                        readOnly={isDirty(this.state.data)} 
                    />
                </div>
            </div>
        )
    }
}

class PermissionTableArea扩展组件{
建造师（道具）{
超级（道具）
这个州={
数据
}
}
handleClickButton=（）=>{
让data=this.state.data；
this.setState（{data:setNonDirty（data）}
}
render（）{
返回(
)
}
}

兄弟组件需要相互交互时的一种常见技术是。这可能值得研究。提升状态的问题是，如果我处理第一个公共祖先中的脏问题，每次状态刷新都会强制重新呈现每个子组件，这会严重影响性能兄弟组件需要相互交互时的ue是。这可能值得研究。提升状态的问题是，如果我处理第一个公共祖先中的脏度，每次状态刷新都会强制重新呈现每个子级，这会严重影响性能。