Question

我有一个名为＆＃34; Component_A＆＃34;的父组件。我有一个子组件＆＃34; Component_B＆＃34;。我试图从父组件中的服务器获取数据，并将其作为道具传递给子组件。但是在我使用＆＃34; componentDidMount＆＃34;进行ajax调用之前，我的道具中没有值。在父母＆＃34; Component_A＆＃34;中的功能。所以我想在子组件中设置defaultProps＆＃34; Component_B＆＃34;使用＆＃34; getDefaultProps＆＃34;。但看起来它不起作用！

＆＃13;

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

＆＃13;

当我加载页面时，我得到＆＃34; Uncaught TypeError：无法读取属性＆＃39; make＆＃39;未定义＆＃34;

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 />);
    }
 }

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

2 个答案: