mixins funktioniert nicht in reactjs

Question

Ich bin Neuling zu reactjs, ich spiele mit einigen reactjs Eigenschaften. Ich bin nicht in der Lage, den Grund zu finden, warum this.props.food nicht angezeigt wird (aber der Konsolenwert "testing the mixins" zeigt in Konsole) der zugewiesene Wert.Was ist der Fehler, den ich tue.Hier ist Einblick in meinen Code.Wenn es nicht ausreicht, lassen Sie es mich wissen.

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

Sie müssen UselessMixin vor Komponentendeklaration definieren, denn jetzt InputBox nicht über UselessMixin kennt und bekommt 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