在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>;
这篇就这么多先吧