Reactjs 在组件之间共享变量

我有三个部分。 应用程序是父组件。 工具和绘图板是子组件。 我想在工具和DrawingBoard组件之间传输数据

export default class App extends  Component{
  getFormData(name, value){
   //empty so far
}
 render(){
   return(
    <div className="main-container">
        <DrawingBoard  styledata={???} />
        <Tools  data={this.getFormData.bind(this)}/>
   </div>
  );
}

导出默认类应用程序扩展组件{
getFormData（名称、值）{
//到目前为止空无一人
}
render（）{
返回(
);
}

我将函数getFormData作为属性传递给工具以获取其数据。 现在我想传递名称和值，最好是作为关联数组或对象 将arr[“name”]=值作为DrawingBoard的属性。

---

我该怎么做？

您可以在

应用程序
组件中使用
状态
，您可以在
工具中更改它，并将新的
状态
传递到
绘图板

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      styledata: {}
    };
  }

  getFormData(name, value) {
    this.setState({
      styledata: { [name]: value }
    })
  }

  render() {
    return <div className="main-container">
      <DrawingBoard styledata={ this.state.styledata } />
      <Tools data={ this.getFormData.bind(this) } />
    </div>
  }
}

class Tools extends React.Component {
  getData() {
    // Load data
    // 
    this.props.data('color', 'red');
  }

  render() {
    return <div>
      <button onClick={ this.getData.bind(this) }>Change Data</button>
    </div>
  }
}

class DrawingBoard extends React.Component {
  render() {
    return <div>
      <h1 style={ this.props.styledata }>DrawingBoard</h1>
    </div>
  }
}

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
样式数据：{}
};
}
getFormData（名称、值）{
这是我的国家({
样式数据：{[name]：值}
})
}
render（）{
返回
}
}
类工具扩展了React.Component{
getData（）{
//加载数据
// 
此.props.data（'color'，'red'）；
}
render（）{
返回
更改数据
}
}
类DrawingBoard扩展React.Component{
render（）{
返回
拉丝板
}
}

使用this.getData.bind（this）会直接降低应用程序的性能，因为它会重新呈现组件，因此在构造函数中使用“this.getData=this，getData.bind（this）”。有关详细信息，请访问“