createClass在react.js中的createClass

Question

我是新來對組件的概念作出反應和混淆。我知道一個組件可以被包含在另一個組件中，但是這次我在一個createClass中看到另一個createClass。

查看源代碼：http://chrisharrington.github.io/demos/react-controls/calendar.html

像116，它是如何看起來像ES6？

Answer 1

作爲示例，以下是使用React.createClass的組件。

var DayNames = React.createClass({ 
    render: function() { 
    return <div className="week names"> 
     <span className="day">Sun</span> 
     <span className="day">Mon</span> 
     <span className="day">Tue</span> 
     <span className="day">Wed</span> 
     <span className="day">Thu</span> 
     <span className="day">Fri</span> 
     <span className="day">Sat</span> 
    </div>; 
    } 
}); 

這裏它又是一個無狀態函數組件。

function DayNames() { 
    return <div className="week names"> 
    <span className="day">Sun</span> 
    <span className="day">Mon</span> 
    <span className="day">Tue</span> 
    <span className="day">Wed</span> 
    <span className="day">Thu</span> 
    <span className="day">Fri</span> 
    <span className="day">Sat</span> 
    </div>; 
} 

在這裏它又是一個ES2015類。

class DayNames extends React.Component { 
    render() { 
    return <div className="week names"> 
     <span className="day">Sun</span> 
     <span className="day">Mon</span> 
     <span className="day">Tue</span> 
     <span className="day">Wed</span> 
     <span className="day">Thu</span> 
     <span className="day">Fri</span> 
     <span className="day">Sat</span> 
    </div>; 
    } 
} 

Answer 2

在ES6和上述反應0.14，也可以使用無狀態的功能部件，例如

const DayNames =() => ( 
    <div className="week names"> 
    <span className="day">Sun</span> 
    <span className="day">Mon</span> 
    <span className="day">Tue</span> 
    <span className="day">Wed</span> 
    <span className="day">Thu</span> 
    <span className="day">Fri</span> 
    <span className="day">Sat</span> 
    </div> 
)