react native组件封装及传值
2017-04-29 12:26
549 查看
一、组件传值方式
1、向组件传值
2、组件获取值
再MyCommponent内部调用
this.props.value1
3、组件与引用组件的地方通过方法回调实时传值
1中的value4可以改写为value4={ (name,sex) => {return "向MyCommponent传递的数据"} } //name和sex是MyCommponent传过来的数据
在MyCommponent中使用回调let getValue = this.props.value4("小明他爸","boy")
4、除了可以向组件传值外 ,还可以向组件传module(或者简单的控件)
eg:
传入
二、组件封装的一些规范和技巧
1、方法的抽取(可以抽去到令人发指,目的就是以后调试方便,模块化开发嘛)
封装组件的目的是为了组件的复用,而复用本身就需要支持调用方多种需求,面对多种需求就需要做多种判断,为了代码的间接性和可读性,把每一个需要调用方做判断的地方都
抽取出来;方便以后的业务更改;
2、设置引用组件时属性的自动提示功能
地方行不行还不知道,以后再试试,试好了及时更新,好了开始工作了,拜
1、向组件传值
<MyCommponent value1="传入文字类别数据"
value2={true} //传入boolen数据 value3={[{key1:"值1"},{key2:"值2"}]}//传入数组对象 value4={()=>{Alert.alert("传入回调方法")}} value5 = {2}//传入数值 />
2、组件获取值
再MyCommponent内部调用
this.props.value1
3、组件与引用组件的地方通过方法回调实时传值
1中的value4可以改写为value4={ (name,sex) => {return "向MyCommponent传递的数据"} } //name和sex是MyCommponent传过来的数据
在MyCommponent中使用回调let getValue = this.props.value4("小明他爸","boy")
4、除了可以向组件传值外 ,还可以向组件传module(或者简单的控件)
eg:
传入
<MyCommponent> <Text> 这个是传入到子组件的空间</Text> </MyCommponent>在MyCommponent中接收
render(){ return( this.props.children ); }注意上面的children代表传过来的<Text>,必须写children,如果传多个并列的组件就需要先从children中一个一个取出来,并列的组件会以集合的形式传过来
二、组件封装的一些规范和技巧
1、方法的抽取(可以抽去到令人发指,目的就是以后调试方便,模块化开发嘛)
封装组件的目的是为了组件的复用,而复用本身就需要支持调用方多种需求,面对多种需求就需要做多种判断,为了代码的间接性和可读性,把每一个需要调用方做判断的地方都
抽取出来;方便以后的业务更改;
2、设置引用组件时属性的自动提示功能
//组件引用说明 RadioButtonGroupView.propTypes={ itemWidth:PropTypes.number, //手动设置radio框的宽度,如果没有设置就默认为 itemWidth itemHeight:React.PropTypes.number, //手动设置radio框的高度,如果没有设置就默认为 itemHeight dataSource:PropTypes.array, //手动输入数据源,必须是固定格式必须填,格式如下dataSource = [{name:'智慧政务'},{name:'便民服务'},{name:'坚果狂欢'},{name:'水果盛宴'}]; itemSelectedId:PropTypes.number, //默认选中的条目,默认为0 itemBeClicked:PropTypes.func, //回调函数,用于回传点击的哪个条目,(item,i),第一个item是条目中的对象,i表示条目地址 }其中RadioButtonGroupView是你封装的组件的名字,这些代码需要放在整个类的下方,我是放在style下面了,反正目前这样可以自动提示属性,至于为什么活着放在其他
地方行不行还不知道,以后再试试,试好了及时更新,好了开始工作了,拜
相关文章推荐
- 《React-Native系列》38、 ReactNative混合组件封装
- react-native组件封装与传值
- 【react-native-0.31-iOS】封装原生组件并调用(02)
- React-Native踩坑之路:react-native原生组件封装(iOS)
- 从零开始 React Native(6) 计时器案例(模块化_组件封装)有图有demo
- react-native组件Button封装与传值
- react-native组件传值与封装
- react-native组件封装与传值
- ReactNative之从HelloWorld中看环境搭建、组件封装、Props及State
- 《React-Native系列》组件封装之Dialog(iOS和Android通用)
- 第四章、ReactNative组件的封装
- 《React-Native系列》13、 组件封装之Dialog(iOS和Android通用)
- react-native之上拉加载,下拉刷新组件封装
- React Native中组件的封装使用
- 《React-Native系列》38、 ReactNative混合组件封装
- react-native封装原生下拉刷新组件
- react-native 组件封装示例
- React Native布局实践:开发京东客户端首页(四)——首页功能按钮及控件封装
- React Native系列——WebView组件使用介绍
- react native组件传递参数值给方法