Извлечение данных из дочерних компонентов из родителя

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() ....