React组件之间共享变量

Question

我有三个组件。 应用程序是父组件。 工具和DrawingBoard是子组件。 我想在工具和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 [“名称”] =值作为属性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> 
    } 
} 

Example