組件之間的React Share變量

Question

我有三個組成部分。 應用是父組件。 工具和繪圖板是子組件。 我想在“工具”和“ 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作為屬性傳遞給Tools以獲取其數據。 現在，我想傳遞名稱和值，最好將其作為具有arr [“ name”] = value的關聯數組或對象作為屬性傳遞給DrawingBoard。 我怎樣才能做到這一點？

Answer 1

您可以在App組件中使用state ，可以在“ Tools更改state ，並將新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