mixins is not working in reactjs

Question

我是新手給reactjs，我正在玩一些reactjs屬性。我無法找到爲什麼this.props.food沒有顯示（但控制檯值「測試mixin」顯示在控制檯）分配的值。我在做什麼錯誤。這裏是我的代碼的一瞥。如果它不夠，請告訴我。

var InputBox=React.createClass({ 
    mixins: [UselessMixin], 
    render:function(){ 
    return <div className="container"> 
      <div className="form-group"> 
      <label for="usr">Name:</label> 
      <input type="text" className="form-control" id="usr" /> 
      <b>My favourite food is </b>{this.props.food} 
      </div> 
     </div> 
    } 
}) 


var UselessMixin = { 
    getDefaultProps: function() { 
    console.log("testing the mixins"); 
    return {food: "dosa"}; 
    } 
}; 

Answer 1

您需要組件聲明之前定義UselessMixin，因爲現在InputBox不知道UselessMixin並得到undefined

var UselessMixin = { 
    getDefaultProps: function() { 
    console.log("testing the mixins"); 
    return {food: "dosa"}; 
    } 
}; 

var InputBox = React.createClass({ 
    mixins: [UselessMixin], 
    render: function() { 
    return <div className="container"> 
     <div className="form-group"> 
     <label htmlFor="usr">Name:</label> 
     <input type="text" className="form-control" id="usr" /> 
     <b>My favourite food is </b>{this.props.food} 
     </div> 
    </div> 
    } 
}) 

Example