版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wwl901215/article/details/70947579
一、组件传值方式
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下面了,反正目前这样可以自动提示属性,至于为什么活着放在其他
地方行不行还不知道,以后再试试,试好了及时更新,好了开始工作了,拜