One.
var FancyCheckbox = React.createClass({
render: function() {
var fancyClass = this.props.checked ? ‘FancyChecked‘ : ‘FancyUnchecked‘;
return (
<div className={fancyClass} onClick={this.props.onClick}>
{this.props.children}
</div>
);
}
});
ReactDOM.render(
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
Hello world!
</FancyCheckbox>,
document.getElementById(‘example‘)
);
Two.
var FancyCheckbox = React.createClass({
render: function() {
var { checked, ...other } = this.props;
var fancyClass = checked ? ‘FancyChecked‘ : ‘FancyUnchecked‘;
// `other` contains { onClick: console.log } but not the checked property
return (
<div {...other} className={fancyClass} />
);
}
});
ReactDOM.render(
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
Hello world!
</FancyCheckbox>,
document.getElementById(‘example‘)
);
React Component Parameter passing