return語句中的兩個不同的括號語法

Question

我正在按照本教程關於入門的ReactJS的https://scotch.io/tutorials/learning-react-getting-started-and-concepts，並且遇到了這個通用代碼，它有兩個不同的括號用於返回語句。

var MyComponent = React.createClass({ 
getInitialState: function(){ 
    return { 
     count: 5 
    } 
}, 
render: function(){ 
    return (
     <h1>{this.state.count}</h1> 
    ) 
} 
}); 

他們爲什麼不同？交換其中一個會導致錯誤。

Answer 1

第一個是對象的有效JS返回值，第二個是隻有JSX理解的東西，它檢測到這種返回並將其解析爲有效的JS，如下所示：return react.createElement(..)（即它返回一個函數）。 JSX特殊返回不適用於返回普通對象，因此無法將其解析爲有效的渲染函數。