React.js終探（五）

在React中，一切都是看做組件。

而組件的嵌套也是十分常見的。

所以有的組件就作為容器組件

容器組件

React元素可以包含子元素

如

1 //JSX
2 <ezpanel title="title">
3     <p>this is demo content</p>
4 </ezpanel>

在React中，用this.props.children可以訪問子元素

如：

1 var EzPanel = React.createClass({
2     render : function(){
3         return     <div className="ez-panel">
4                     {this.props.children}
5                 </div>;
6     }
7 });

這樣就可以把在React.render（）中寫的子元素放到相應的容器中了。

JSX可展開屬性

1 //JSX
2 <div classname="ez-slider" onmousedown="{this.onMouseDown}" onmousemove="{this.onMouseMove}" onmouseup="{this.onMouseUp}"></div>

在JSX中，有時候可能我們的React元素有很多的屬性。

JSX提供了一個比較好的特性來支持這種情況。即可設置一個JSON對象作為屬性包。

格式如： <xx {...yy}></xx>

如：

 1 //定義屬性包
 2 var props = {
 3     className : "ez-slider",
 4     onMouseDown : this.onMouseDown,
 5     onMouseUp : this.onMouseUp,
 6     onMouseMove : this.onMouseMove
 7 };
 8  
 9 //傳入屬性包
10 var rel = <div {...props}></div>;

這篇就這麼多先吧