React Share Variablen zwischen den Komponenten

Question

Ich habe drei Komponenten. App ist die übergeordnete Komponente. Tools und DrawingBoard sind untergeordnete Komponenten. Ich möchte Daten zwischen den Tools und DrawingBoard Component übertragen.

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> 
); 
} 

Ich übergebe die Funktion getFormData als eine Eigenschaft an Tools, um seine Daten zu erhalten. Nun möchte ich Name und Wert übergeben, vorzugsweise als assoziatives Array oder Objekt mit arr ["name"] = Wert als eine Eigenschaft zu DrawingBoard. Wie kann ich das tun?

Answer 1

Sie können state in App Komponente verwenden, die Sie es in Tools und neue state ändern kann den Ball zu 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