Question

我有三个组件。 App是Parent组件。 Tools和DrawingBoard是子组件。我想在Tools和DrawingBoard Component之间传输数据。

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以获取其数据。现在我想传递名称和值，最好是作为关联数组或对象 with arr [“name”] = value作为DrawingBoard的属性。我怎么能这样做？

Answer 1

您可以在state组件中使用App，您可以在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> } }，

{{1}}

Example

React在组件之间共享变量

1 个答案: