React.js终探(五)
2015-06-18 23:42
609 查看
在React中,一切都是看做组件。
而组件的嵌套也是十分常见的。
所以有的组件就作为容器组件
容器组件
React元素可以包含子元素
如
在React中,用this.props.children可以访问子元素
如:
这样就可以把在React.render()中写的子元素放到相应的容器中了。
JSX可展开属性
在JSX中,有时候可能我们的React元素有很多的属性。
JSX提供了一个比较好的特性来支持这种情况。即可设置一个JSON对象作为属性包。
格式如: <xx {...yy}></xx>
如:
这篇就这么多先吧
而组件的嵌套也是十分常见的。
所以有的组件就作为容器组件
容器组件
React元素可以包含子元素
如
//JSX <ezpanel title="title"> <p>this is demo content</p> </ezpanel>
在React中,用this.props.children可以访问子元素
如:
var EzPanel = React.createClass({ render : function(){ return <div className="ez-panel"> {this.props.children} </div>; } });
这样就可以把在React.render()中写的子元素放到相应的容器中了。
JSX可展开属性
//JSX <div classname="ez-slider" onmousedown="{this.onMouseDown}" onmousemove="{this.onMouseMove}" onmouseup="{this.onMouseUp}"></div>
在JSX中,有时候可能我们的React元素有很多的属性。
JSX提供了一个比较好的特性来支持这种情况。即可设置一个JSON对象作为属性包。
格式如: <xx {...yy}></xx>
如:
//定义属性包 var props = { className : "ez-slider", onMouseDown : this.onMouseDown, onMouseUp : this.onMouseUp, onMouseMove : this.onMouseMove }; //传入属性包 var rel = <div {...props}></div>;
这篇就这么多先吧
相关文章推荐
- ReactiveCocoa框架菜鸟入门(五)——信号的FlattenMap与Map
- 【Facebook的UI开发框架React入门之六】单个View的布局与样式Style简介(iOS平台)-goodmao
- ReactiveCocoa & MVVM 学习总结二
- 如何建立基于CocoaPods的ReactiveCocoa工程
- 【Facebook的UI开发框架React入门之五】视图View与文本Text简介(iOS平台)-goodmao
- ReactiveCocoa & MVVM 学习总结一
- proactor 与 actor 模式
- React.js再探(四)
- 推荐 11 款 React Native 开源移动 UI 组件
- Angular.js、React.js整合
- React-Native
- Angular.js 与 React.js对比
- 对于React体系的一点想法
- React.js 基础入门四--要点总结
- React.js 基础入门三 ---组件状态state
- 响应式编程Reactive Programming
- React.js 基础入门二--组件嵌套
- React.js入门基础一
- React学习——ListView(Reflux)
- React学习——ListView组件