看以下示例了解如何定义一个组件
// 定义一个组件LikeButton
var LikeButton = React.createClass({
// 给state定义初始值
getInitialState: function() {
return {liked: true};
},
// click事件的处理函数
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? '稀罕' : '讨厌';
return (
<p onClick={this.handleClick}>
我{text}你.
</p>
);
}
}); ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
或者用ES6定义一个组件
// 使用React.Component来定义组件
class Button extends React.Component {
static displayName = 'Button' static propTypes = {
children: React.PropTypes.any,
className: React.PropTypes.string,
disabled: React.PropTypes.bool,
onClick: React.PropTypes.func,
once: React.PropTypes.bool,
status: React.PropTypes.string,
style: React.PropTypes.object,
type: React.PropTypes.oneOf(['submit', 'button'])
} componentWillReceiveProps(nextProps) {
if (nextProps.disabled !== this.props.disabled) {
this.setState({ disabled: nextProps.disabled })
}
} state = {
disabled: this.props.disabled,
show: null
} disable(elem) {
this.setState({ disabled: true, show: elem })
} enable(elem) {
this.setState({ disabled: false, show: elem })
} handleClick() {
if (this.props.onClick) {
this.props.onClick()
}
if (this.props.once) {
this.disable()
}
} render() {
let status = this.props.status
if (status) {
status = `rct-button-${status}`
} const className = classnames(
this.props.className,
this.getGrid(),
'rct-button',
status
) return (
<button onClick={this.handleClick.bind(this)}
style={this.props.style}
disabled={this.state.disabled}
className={className}
type={this.props.type || "button"}>
{ this.state.show || this.props.children }
</button>
)
}
} export default Button