React 在组件之间共享变量

Question

我有三个组件。 App 是父组件。 Tools 和 DrawingBoard 是子组件。我想在 Tools 和 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 作为属性传递给工具以获取其数据。现在我想传递名称和值，最好是作为关联数组或对象将 arr["name"] = 值作为属性到 DrawingBoard。我该怎么做？

Answer 1

您可以在 App 组件中使用 state，您可以在 Tools 中更改它，并将新的 state 传递给 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>
  }
}

Example

React 在组件之间共享变量

React Share variables between components

components

properties

reactjs