親から子供のコンポーネントのデータを取得する

Question

私は3人の子供を引っ張っている親コンポーネントを持っています。私はAxiosを使って外部データ呼び出しで親の状態を設定しました。

私が現在抱えている問題は、親コンポーネントから状態データを引き出すために子コンポーネントでどのような構文を使用するのですか？

var Component_1 = React.createClass({ 

render(){ 
    return(
     <div className="col-sm-4"> 
      <div className="col-sm-12"> 
       <h5>Component 1</h5> 
       <div className="col-sm-12"> 
        <svg className="svg_test"></svg> 
       </div> 
      </div> 
      <div className="col-sm-12"> 
       <h5>"state data goes here?"</h5> 
       <h6>Component 1</h6> 
      </div> 
     </div> 
     ); 
    } 
}); 

var Component_2 = React.createClass({ 

render(){ 
    return(
     <div className="col-sm-4"> 
      <div className="col-sm-12"> 
       <h5>Component 2</h5> 
       <div className="col-sm-12"> 
        <svg className="svg_test"></svg> 
       </div> 
      </div> 
      <div className="col-sm-12"> 
       <h5>"state data goes here?"</h5> 
       <h6>Component 2</h6> 
      </div> 
     </div> 
     ); 
    } 
}); 


var Component_3 = React.createClass({ 

render(){ 
    return(
     <div className="col-sm-4"> 
      <div className="col-sm-12"> 
       <h5>Component 3</h5> 
       <div className="col-sm-12"> 
        <svg className="svg_test"></svg> 
       </div> 
      </div> 
      <div className="col-sm-12"> 
       <h5>"state data goes here?"</h5> 
       <h6>Component 3</h6> 
      </div> 
     </div> 
     ); 
    } 
}); 



var Parent_Component = React.createClass({ 

getInitialState: function(){ 
    return{ 
     data: [] 
    } 
}, 

componentDidMount: function(){ 
    var _this = this; 
    this.serverRequest = axios.get("external data call").then(function(result){ 
     _this.setState({ 
      data: result.data 
     }); 
    }) 
}, 

componentWillUnmount: function(){ 
    this.serverRequest.abort(); 
}, 

render() { 
    return (
     <div className="col-sm-12"> 
      <Component_1></Component_1> 
      <Component_2></Component_2> 
      <Component_3></Component_3> 
     </div> 
    ); 

} 
}); 

ReactDOM.render(<Parent_Component />, 
document.getElementById("component")) 

Answer 1

小道具で送信しますか？

var Component_1 = React.createClass({ 

render(){ 
    console.log(this.props.data) 
    return(
     <div className="col-sm-4"> 
      <div className="col-sm-12"> 
       <h5>Component 1</h5> 
       <div className="col-sm-12"> 
        <svg className="svg_test"></svg> 
       </div> 
      </div> 
      <div className="col-sm-12"> 
       <h5>"state data goes here?"</h5> 
       <h6>Component 1</h6> 
      </div> 
     </div> 
     ); 
    } 
}); 

var Component_2 = React.createClass({ 

render(){ 
    console.log(this.props.data) 
    return(
     <div className="col-sm-4"> 
      <div className="col-sm-12"> 
       <h5>Component 2</h5> 
       <div className="col-sm-12"> 
        <svg className="svg_test"></svg> 
       </div> 
      </div> 
      <div className="col-sm-12"> 
       <h5>"state data goes here?"</h5> 
       <h6>Component 2</h6> 
      </div> 
     </div> 
     ); 
    } 
}); 


var Component_3 = React.createClass({ 

render(){ 
    console.log(this.props.data) 
    return(
     <div className="col-sm-4"> 
      <div className="col-sm-12"> 
       <h5>Component 3</h5> 
       <div className="col-sm-12"> 
        <svg className="svg_test"></svg> 
       </div> 
      </div> 
      <div className="col-sm-12"> 
       <h5>"state data goes here?"</h5> 
       <h6>Component 3</h6> 
      </div> 
     </div> 
     ); 
    } 
}); 



var Parent_Component = React.createClass({ 

getInitialState: function(){ 
    return{ 
     data: [] 
    } 
}, 

componentDidMount: function(){ 
    var _this = this; 
    this.serverRequest = axios.get("external data call").then(function(result){ 
     _this.setState({ 
      data: result.data 
     }); 
    }) 
}, 

componentWillUnmount: function(){ 
    this.serverRequest.abort(); 
}, 

render() { 
    return (
     <div className="col-sm-12"> 
      <Component_1 data={this.state.data}></Component_1> 
      <Component_2 data={this.state.data}></Component_2> 
      <Component_3 data={this.state.data}></Component_3> 
     </div> 
    ); 

} 
}); 

ReactDOM.render(<Parent_Component />, 
document.getElementById("component")) 

このデータを子供の状態にしたい場合は、stateble子コンポーネントを作成し、コンストラクタで設定することができます。

class Component_1 extends React.Component{ 
    constructor(){ 
     super() 
     this.state={ 
      data: this.props.data 
     } 
    } 
    redner() ....