1.父组件传值给子组件
父组件给子组件传值 react 和vue都是很相似的 , 很简单
1.父组件引入子组件
import Fashbases from './Fashbases'
2.在子组件上直接传值
<Fashbases child='父元素传递的值' ></Fashbases>
3.在子组件上通过this.props.child 接收父组件传过来的值
<Text>这个也是测试,{this.props.child}</Text>
2.子组件给父组件传值
子组件给父组件传值 相当于父组件传递方法给子组件 子组件通过调用父组件的方法 ,把需要传递的值写在形参即可
1.父组件进入子组件
import Fashbases from './Fashbases'
2.在父组件中定义方法
_parentClick = (item)=>{ console.warn('父组件的方法'+'子组件内容'+item); }
3.在子组件上传递方法
<Fashbases parentClick={this._parentClick}> </Fashbases>
4.在子组件中通过this.props. parentClick('传值' )
<TouchableOpacity onPress={()=>{this.props.parentClick('childer')}}></View>
这样就把子组件想要传递的参数传递给了父组件 ,
3.在子组件中展示父组件的样式
一般这样写在引用的子组件的样式 是会被子组件忽略的 ,但是 如果在子组件中通过this.props.childer引入就不会被忽略
4.父组件调用子组件的方法
在React Native中是有体现的 , 父组件调用组组件的方法是十分有用的
父组件调用子组件的方法 通过ref来获取子组件的dom元素 ,
在子组件中定义方法即可 ,
5.父组件在调用子组件的时候还可以书写‘slot’ 不过,react中这只不过是个标志而已
可以在父组件引用的子组件中书写 slot=‘right’
可以通过this.props.slot 获取right , 这样你可以判断自己 的组件放在什么位置 ,最后可以通过flex布局完成自己想要的 ,不同的是vue是封装好的而react 你需要自己模拟这个过程