問題與反應組件加載

Question

我決定學會在這個週末做出反應，JSFiddle中的事情一直很好，但是我決定添加第四個組件（var gooBye ...），現在視圖是空的。有什麼想法可能造成這種情況？沒有錯誤彈出 JSFiddle React components

          
  
 
   
 
    
var Hello = React.createClass({ 
 
    render: function() { 
 
     return <div>Hello {this.props.name}</div>; 
 
    } 
 
}); 
 

 
var testButton = React.createClass({ 
 
\t render: function() { 
 
    \t \t return <button name="button">Click</button>; 
 
    } 
 
}); 
 
    
 
var goodBye = React.createClass({ 
 
\t render: function() { 
 
    \t \t return <div>GoodBye</div>; 
 
    } 
 
}); 
 

 

 
React.render(
 
\t <Hello name="People" />, 
 
\t document.getElementById('myClass'); 
 
); 
 
    
 
ReactDOM.render(
 
    \t testButton(), 
 
    document.getElementById('test2'); 
 
); 
 
    
 
React.render(
 
    <goodBye />, 
 
    document.getElementById('test3'); 
 
); 
 
 
    
<div id="myClass"> 
 
    </div> 
 
<div id="test1"> 
 
</div> 
 
<div id="test2"> 
 
    </div> 
 
    <div id="test3"> 
 
    </div> 
 
<script type="text/jsx"> 
 
    \t \t \t ReactDOM.render(
 
    \t <h1>Test component in html body</h1>, 
 
     document.getElementById('test'); 
 
    ); 
 
</script> 
 

 

 
</body>
 
   
 
  
 
 

 

Answer 1

組件名稱應大寫字母，例如啓動GoodBye。

當JSX中的元素名稱以小寫字母開頭時，React假定它是原生HTML（或SVG ...）元素，例如<div>或<input>。當它以大寫字母開頭時，它假定它是一個React組件，例如<Hello>或<GoodBye>。

var GoodBye = React.createClass({ 
    render: function() { 
     return <div>GoodBye</div>; 
    } 
}); 

ReactDOM.render(
    <GoodBye />, 
    document.getElementById('test3') 
); 

Answer 2

您有多個語法錯誤，我可以看到他們我打開你的jsfiddle控制檯第二：

您需要使用ReactDOM.render。 react.render已被棄用 你不能在你的括號，去年分號：(<example>, asdfasdf;)應該(<example>, asdfasdf)

ReactDOM.render(
    <TestButton />, 
    document.getElementById('test2') // no semi-colon here! 
); 

你需要有資金在你的組件的前面。

var TestButton = React.createClass({ 
    render: function() { 
     return <button name="button">Click</button>; 
    } 
}); 

這裏是你的一個例子（上面的代碼）工作小提琴......你接近僅僅是非常謹慎的語法。

Fiddle React