组件
生成组件的格式 - createClass
var HelloMsg = React.createClass(
render: function() {
return HTML代码;
}
);
使用组件的方式
ReactDOM.render(
<HelloMsg />,
document.getElementById("渲染到目标DOM的ID")
);
给组件传值 - this.props
- this.props对象的属性与组件的属性对应
- class属性要写成className
- for属性写成htmlFor
var HelloMsg = React.createClass({
render: function() {
return <h1>这是一个{this.props.name}标签</h1>;
}
});
ReactDOM.render(
<HelloMsg name="H1" />,
document.getElementById("渲染到目标DOM的ID")
);
组件的子节点通过this.props.children获取
var RenderList = React.createClass({ render: function() {
return (
<ol>
{
React.Children.map(
this.props.children,
function(child) {
return <li>{child}</li>;
}
)
}
</ol>
)
}
});
ReactDOM.render(
<RenderList>
<span>第一行</span>
<span>第二行</span>
</RenderList>,
document.querySelector('#tpl') );
- 组件没有子节点，this.props.children为undefined
- 组件只有一个子节点，this.props.children为Object
- 组件有多个子节点，this.props.children为Array
