Question

我有两个组成部分。一个是UserBase，在其上调用ajax请求以获取值。获取这些值并在标题状态下更新。

另一个组件是Header。它是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（）不会触发额外的渲染。

因此，您的Header组件将具有与其中类似的功能（未经测试）：

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

在收到道具之后在孩子中设置状态？

1 个答案: