Javascript 在两个同级React.js组件之间传递数据

我在页面上有两个组件实例（搜索字段），它们之间有第二个组件（进行服务器调用的按钮），如下所示：

ReactDOM.render(
,
document.getElementById（'root'））
);我创建了一个示例，说明如何使用父组件在两个组件之间共享变量

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {shared_var: "init"};
    }

    updateShared(shared_value) {
        this.setState({shared_var: shared_value});
    }

    render() {
        return (
            <div>
                <CardSearch shared_var={this.state.shared_var} updateShared={this.updateShared} />
                <RunOnServer shared_var={this.state.shared_var} updateShared={this.updateShared} />
                <div> The shared value is {this.state.shared_var} </div>
            </div>
        );
    }
}

class CardSearch extends React.Component {
    updateShared() {
        this.props.updateShared('card');
    }

    render() {
        return (
            <button onClick={this.updateShared} style={this.props.shared_var == 'card' ? {backgroundColor: "green"} : null} >
            card
            </button>
        );
    }
}

class RunOnServer extends React.Component {
    updateShared() {
        this.props.updateShared('run');
    }

    render() {
        return (
            <button onClick={this.updateShared} style={this.props.shared_var == 'run' ? {backgroundColor: "green"} : null}>
            run
            </button>
        );
    }
}


ReactDOM.render(
  <Parent/>,
  document.getElementById('container')
);

类父级扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={shared_var:“init”}；
}
updateShared（共享值）{
this.setState（{shared_var:shared_value}）；
}
render（）{
返回(
共享值是{this.state.shared_var}
);
}
}
类CardSearch扩展了React.Component{
updateShared（）{
此.props.updateShared（'card'）；
}
render（）{
返回(
卡片
);
}
}
类RunOnServer扩展了React.Component{
updateShared（）{
this.props.updateShared（'run'）；
}
render（）{
返回(
跑
);
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);
截至2020年2月<代码>上下文API是处理此问题的方法：
//首先需要创建TodoContext
//Todo.jsx
//...
导出默认值（）=>{
返回(
)
}
//现在在您的TodoList.jsx和TodoCalendar.jsx中；您可以通过以下方式访问TodoContext：
//...
const todoContext=React.useContext（todoContext）；
console.log（todoContext）
//...
//...

通过查看视频教程了解更多信息
祝你好运……
你是否考虑过创建一个顶级（即父级）组件来管理共享变量？我不确定我是否已经有了这样的组件。。。index.js包含我在上面发布的代码（除了“cards”var的源代码和导入/需求之外，没有其他内容），但是index不是一个组件，它会工作吗？谢谢，这已经工作了。我创建了两个updateShared函数，每个CardSearch组件一个，它们分别更新var1或var2。其中一个技巧是，我在.setState（{string:var}）之后调用了this.props.updateShared（this.state.var），但是传入的var是旧的，而不是我设置状态时使用的更新的。所以我将这个.props.updateShared（var）作为回调传递给this.setState。不知道为什么在setState调用之后它没有更新状态值……我希望看到这个答案用ES6类而不是React.createClass重写。只是有点分散注意力。嗯，我想我可以自己做。“Hooks&contextapi”链接断开了。请更新。谢谢