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>;

这篇就这么多先吧