我无法在 reactjs 中为子组件中的道具设置默认值

Question

我有一个名为“Component_A”的父组件和一个子组件“Component_B”。我正在尝试从父组件中的服务器获取数据并将其作为道具传递给子组件。但是在我在父“Component_A”的“componentDidMount”函数中进行ajax调用之前，我的道具将没有值。所以我正在尝试使用“getDefaultProps”在子组件“Component_B”中设置 defaultProps。但是好像不行！

var Component_A = React.createClass({
        componentDidMount : function(){
            //Get data from server and set it in state variable called "data"
        },
        render : function(){
            return (
                <ComponentB sampleData={this.state.data} />
            )
        }
    })

    var ComponentB = React.createClass({
        getDefaultProps : function (){
            return {
                data : {
                  vehicle : {
                      make :{
                         name : "Ford"
                      },
                      model : {
                         name : "Focus"
                      }
                  }
                }
            }
        },
        render : function(){
            return (
                 <div> {this.props.data.vehicle.make.name} </div>
            )
        }
    })

当我加载页面时，我得到“Uncaught TypeError: Cannot read property 'make' of undefined”

Answer 1

   render : function(){
            <ComponentB sampleData={this.state.data} />
        }

一切正常，也许你忘了return这里

Answer 2

把A的渲染改成这个-

render : function(){ 
    if(this.state.data){
        return ( <ComponentB data={this.state.data} /> );
    }
    else{
        return ( <ComponentB />);
    }
 }