從父項中檢索兒童組件中的數據

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