コンポーネント間で変数を共有する

Question

私は3つのコンポーネントを持っています。 アプリケーションがParentコンポーネントです。 ToolsとDrawingBoardは子コンポーネントです。 ToolsとDrawingBoardコンポーネント間でDataを転送したいとします。

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"] = valueをDrawingBoardのプロパティとして渡したいとします。 どうすればいいですか？

Answer 1

あなたは、あなたがDrawingBoardにToolsと新しいstateパスの内側にそれを変更することができますAppコンポーネントに

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

を stateを使用することができます