react-native自定义组件组件传值(十)

react-native自定义组件组件传值

react-native使用JSX的模版语法,自定义组件模块是最常见的组织代码方式,同时使用自定义组件也可以使数据模版高效复用,交互变得更加统一,下面是常见的自定义组件封装方式:

1.react组件可以是变量

var FaceDetect  = Function||Class||Module;

2.react组件可以是模块

//导入的文件模块
import FaceDetect from './FaceDetect.js'

//使用ES6 class创建的React Component
class FaceDetect extends React.Component{
  render() {
    return 
  }
}

3.react组件可以是function

function FaceDetect(){
    return 0
}

4.......

React-Native组件传值方式:
总结一句话:通过对自定义组件的属性设置来完成数据传递,具体的方式,父组件可自定义属性,子组件内部通过其props对象来接收相关属性。
例如:

//Child:+++++
class FaceDetect extends React.Component {
  constructor(props) {
     super(props);//访问继承父对象的构造器函数
     this.state = {};
 }
  render() {
    let {prop1,prop2} = this.props;
    return ;
  }
}

//Parent:+++++
handleChild(e){
    //子组件触发的方法
}
TellChild(e){
    this.refs[FaceDetect][method..] //触发子组件的方法
}

  


 

 

你可能感兴趣的:(React,Native开发)