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