ReactNative进阶（二十六）：父子组件函数调用

(文章目录)

一、需求

在子组件执行某个操作的时候，需要其调用父组件的某个函数或者改变父组件的某个参数。实现方式如下：

二、子组件

import PropTypes from 'prop-types';

export default class Child extends PureComponent {
  static propTypes = {
    onItemClick: PropTypes.func,
  }
  
  info = '子组件的内容';
  
  itemClick(info) {
     // 可以将子组件中的某个内容传出给父组件
     if (this.props.onItemClick) {
       this.props.onItemClick(info);
     }
  }
  
  render(){
      return(
      <TouchableOpacity
            onPress={() => { this.itemClick(this.info); }}
            style={styles.touchItem}
          >
            <Text >
              点击修改父组件内容
            </Text>
          </TouchableOpacity>
      );
  }
}

三、父组件

export default class Father extends PureComponent {
  _onItemClick(info) {
  	console.log('你调用了父组件的方法')
    // 显示info或者用子组件传参改变父组件中的参数
    console.log(info);
  }
 render(){
    return(
		// _onItemClick为父组件函数定义
        <Child
           onItemClick={this._onItemClick}/>
    ）;
}

四、延伸阅读

• 《ReactNative专栏》