React Native中如何从子组件调用父组件函数

嘿，我瞅了你的代码，发现几个关键问题导致子组件没法正确调用父组件的callParent函数，咱们一步步来修正：

第一步：修复父组件的问题 #

首先你的父组件constructor里重复给this.state赋值了，这会导致第一个loading: true的状态被覆盖，得合并成一个对象。另外，你已经用箭头函数定义了callParent，其实不需要在constructor里再bind它（箭头函数会自动绑定当前组件的this）。最后，必须把父组件的函数作为props传给子组件，不然子组件拿不到这个方法。

修正后的Parent.js：

import React from 'react';
import Child from './Child';

class Parent extends React.Component {
  constructor(props) {
    super(props);
    // 合并state，不要分开赋值
    this.state = {
      loading: true,
      active: 'active'
    };
    // 箭头函数定义的callParent不需要在这里bind，所以可以删掉这行
    // this.callParent = this.callParent.bind(this)
    this.openDrawer = this.openDrawerButtonFunction.bind(this);
  }

  // 箭头函数自动绑定this，没问题
  callParent = () => {
    console.log('I am your father')
  }

  openDrawerButtonFunction = () => {
    // 这里可以写你的抽屉逻辑
  }

  render() {
    // 把callParent作为props传给子组件
    return (
      <Child callParent={this.callParent} />
    )
  }
}

export default Parent;

第二步：修正子组件的调用逻辑 #

你的子组件里，onPressAvatar方法里只是bind了this.props.callParent但没有执行它，而且其实根本不需要bind（因为父组件的方法已经绑定好this了），直接调用就行。

修正后的Child.js：

import React from 'react';
import { Avatar } from 'react-native-elements'; // 假设你用的是这个Avatar组件

class Child extends React.Component {
  onPressAvatar = () => {
    console.log('press on avatar');
    // 直接调用父组件传过来的方法，不需要bind
    this.props.callParent();
  }

  render() {
    return (
      <Avatar
        avatarStyle={{ height: 50 }}
        onPress={() => this.onPressAvatar()}
        source={require('../../assets/images/dav-r.jpeg')}
      />
    )
  }
}

export default Child;

额外小提示 #

如果子组件是函数式组件的话，写法会更简单：

// 函数式子组件
const Child = ({ callParent }) => {
  const onPressAvatar = () => {
    console.log('press on avatar');
    callParent();
  }

  return (
    <Avatar
      avatarStyle={{ height: 50 }}
      onPress={onPressAvatar}
      source={require('../../assets/images/dav-r.jpeg')}
    />
  )
}

这样修改后，点击子组件的Avatar就能触发父组件的callParent函数，控制台会输出对应的日志啦～

内容的提问来源于stack exchange，提问作者PandaMastr