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

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

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

1.react组件可以是变量

var FaceDetect  = Function||Class||Module;

<FaceDetect  />

2.react组件可以是模块

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

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

<FaceDetect />

3.react组件可以是function

function FaceDetect(){
    return <View><Text>0</Text></View>
}

<FaceDetect />

4.......

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

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

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

<FaceDetect ref='FaceDetect ' onHandle={ this.handleChild }/>