在小孩收到道具後置入狀態？

Question

我有兩個組件。一個是UserBase，其中調用ajax請求以獲取值。當獲取這些值並在頭部狀態中更新時。

另一個組件是標題。它是UserBase的一個子組件。所以當狀態更新時，它將它傳遞給子組件。

現在，我的問題是我必須更新孩子的狀態，當它將從UserBase組件收到道具。我怎樣才能實現這個功能。

這裏是我的代碼

標題組件

var React = require('react'); 
var Router = require('react-router'); 
import Auth from './Auth.js'; 
import PopupSmall from './PopupSmall.js'; 

var headerStyle = { 
    border:0 
} 

class Header extends React.Component{ 

    constructor(){ 
     super(); 
     console.log("constructor"); 
     this.state = {basicInfo : {}}; 
    } 

    // **some function which needs to tigger when this component will receive props** 

    popupChange(){ 
     console.log("============popupChange============"); 
     console.log(this.state); 
     Router.browserHistory.push("/dashboard"); 
    } 

    render(){ 
     if(this.props.basicInfo){ 

      return (
       <div> 
       {this.props.basicInfo.isAgency==1 ? <PopupSmall popupCallBack={this.popupChange.bind(this)} itemList={this.props.agencies} show='true' title='Agencies'/> : console.log()} 
      </div> 
      ) 
     } 

    } 
} 

export default Header; 

USERBASE組件

import React from 'react'; 
import Header from './Header.js'; 
import Auth from './Auth.js'; 
import Loader from './Loader.js'; 

var Router = require('react-router'); 

class Base extends React.Component{ 
    constructor(){ 
     super(); 
     this.state = {basicInfo :[]}; 
    } 

    loadDataFromServer() { 
     var tokenId = Auth.getCookies("token"); 

     if(tokenId!=""){ 

      var data = { 
       token : tokenId 
      } 

      $.ajax({ 
       url: 'http://xxx.xxxxxxx.xxx/abc/cde', 
       dataType: 'json', 
       cache: false, 
       type : 'POST', 
       data : JSON.stringify(data), 
       headers: { 
        'Accept': 'application/json', 
        'Content-Type': 'application/json' 
       }, 
       success: function(response) { 

       var info = { 
        compName : response.name, 
        firstName : response.fn, 
        isAgency : response.isAgeny 
       } 

       this.setState({basicInfo:info}, function(){ 
        //console.log(this.state.data); 
       }.bind(this)); 

       }.bind(this), 
       error: function(xhr, status, err) { 
       console.error("", status, err.toString()); 
       }.bind(this) 
      }); 
     } else { 
      Router.browserHistory.push('/login'); 
     } 
    } 

    componentDidMount() { 
     this.loadDataFromServer(); 
    } 

    render(){ 
     document.body.className="nav-md"; 

     return (

      <div className="container body"> 
       <div className="main_container"> 
        <Header basicInfo={this.state.basicInfo} /> 
       </div> 
      </div> 

     ); 
    } 
} 

export default Base; 

Answer 1

如果你還沒有，有一個讀通過：https://facebook.github.io/react/docs/component-specs.html

還有一個特別的功能，可滿足您這裏需要：

componentWillReceiveProps（nextProps，nextState）

當組件接收新道具時調用。此方法不用於初始渲染。

使用this作爲在使用this.setState（）更新狀態來調用render（）之前對prop過渡作出反應的機會。舊的道具可以通過this.props訪問。在這個函數中調用this.setState（）不會觸發額外的渲染。

所以你的頭組件將具有類似於下面的它（未經測試）功能：

componentWillReceiveProps(nextProps) { 
    if (nextProps.basicInfo !== this.props.basicInfo) { 
    this.setState({ basicInfo: nextProps.basicInfo }); 
    } 
}