方法一（不传参）：
创建组件：
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello World！</h1>;
}
});
使用组件：
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
方法二（向组件传参==>使用 this.props 对象）：
创建组件：
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
使用组件：
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
方法三（复合组件即多个组件组件成一个组件）：
// 组件一
var WebSite = React.createClass({
render: function() {
return (
<div>
<Name name={this.props.name} /> // 组件二
<Link site={this.props.site} /> // 组件三
</div>
);
}
});
// 组件二
var Name = React.createClass({
render: function() {
return (
<h1>{this.props.name}</h1
);
}
});
// 组件三
var Link = React.createClass({
render: function() {
return (
<a href={this.props.site}> {this.props.site} </a>
);
}
});
// 输出页面
ReactDOM.render(
<WebSite name="菜鸟教程" site=" http://www.runoob.com" />,
document.getElementById('example')
);
网友评论