組件
生成組件的格式 - 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
