如果你还没有使用ES6语法,那么定义组件,只能使用React.createClass
这个helper来创建组件,下面是一段示例:
var React = require("react"); var Greeting = React.createClass({ propTypes: { name: React.PropTypes.string //属性校验 }, getDefaultProps: function() { return { name: 'Mary' //默认属性值 }; }, getInitialState: function() { return {count: this.props.initialCount}; //初始化state }, handleClick: function() { //用户点击事件的处理函数 }, render: function() { return <h1>Hello, {this.props.name}</h1>; } }); module.exports = Greeting;
这段代码,包含了组件的几个关键组成部分,这种方式下,组件的props、state等都是以对象属性的方式组合在一起,其中默认属props和初始state都是返回对象的函数,propTypes则是个对象。这里还有一个值得注意的事情是,在createClass中,React对属性中的所有函数都进行了this
绑定,也就是如上面的hanleClick
其实相当于handleClick.bind(this)
。