React類不渲染

Question

反應類myComponent未在元素example1內呈現。

什麼我能夠在控制檯得到的是

您正在使用的瀏覽器JSX變壓器。一定要預編譯JSX用於生產 - http://facebook.github.io/react/docs/tooling-integration.html#jsx

代碼

<script type="text/jsx"> 
      var myComponent = React.createClass({ 
       render: function() { 
       return (
        <h2>{this.props.name} wants to eat {this.props.food}</h2> 
       ); 
       } 
      }); 

React.render(
     <div> 
      <myComponent food="fruits" name="Raj1"/> 
      <myComponent food="Veggies" name="Raj2"/> 
      <myComponent food="Chicken" name="Raj3"/> 
      <myComponent food="Burger" name="Raj4"/> 
     </div>, 
      document.getElementById('example1')); 
    </script> 

Answer 1

你必須利用你的反應類

var MyComponent = React.createClass({ 
    render: function() { 
      return (
      <h2>{this.props.name} wants to eat {this.props.food}</h2> 
     ); 
    } 
}); 

working fiddle example