从父项中检索儿童组件中的数据

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")) 

如果你想让这个数据处于子状态，你可以创建有状态的子组件并在构造函数中设置。

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