React Native父组件按钮 onPress 调用子组件函数问题

嘿，作为React Native新手遇到这种问题太正常了，我来帮你一步步搞定！首先先指出你当前代码里的一个关键小错误，然后再分别解决单个和多个子组件方法调用的问题。

1. 先修正单个子组件的调用逻辑 #

你现在的Button里写了onPress={this.foo.myFunction()}，这会导致组件一渲染就立刻执行myFunction，而不是点击按钮的时候才触发。正确的做法是给onPress传递一个函数引用，而不是直接调用函数。

修改后的父组件代码： #

export default class ParentComponent extends Component {
  constructor(props) {
    super(props);
  }

  // 专门的点击处理函数，避免直接在onPress里调用方法
  handleSinglePress = () => {
    // 先判断ref是否存在，防止组件未挂载时报错
    if (this.fooA) {
      this.fooA.myFunction();
    }
  };

  render() {
    return (
      <View>
        <Foo name="a" ref={foo => {this.fooA = foo}} {...this.props} />
        <Text>-----------</Text>
        <Foo name="b" />
        <Text>-----------</Text>
        {/* 这里传递函数引用，点击时才会执行 */}
        <Button onPress={this.handleSinglePress} title="Start Foo A" color="#841584" />
      </View>
    );
  }
}

子组件Foo的方法要确保this指向正确： #

class Foo extends Component {
  // 用箭头函数定义方法，自动绑定this到组件实例
  myFunction = () => {
    console.log(`我是Foo ${this.props.name}，myFunction执行啦！`);
    // 这里写你的业务逻辑
  };

  render() {
    return <Text>Foo Component: {this.props.name}</Text>;
  }
}

2. 一次点击调用两个子组件的myFunction #

要实现这个需求，只需要给第二个子组件也添加ref，然后在点击处理函数里依次调用两个子组件的方法即可：

完整父组件代码： #

export default class ParentComponent extends Component {
  constructor(props) {
    super(props);
  }

  handleAllPress = () => {
    // 依次调用两个子组件的方法，同样先判断ref是否存在
    if (this.fooA) {
      this.fooA.myFunction();
    }
    if (this.fooB) {
      this.fooB.myFunction();
    }
  };

  render() {
    return (
      <View>
        <Foo name="a" ref={foo => {this.fooA = foo}} {...this.props} />
        <Text>-----------</Text>
        <Foo name="b" ref={foo => {this.fooB = foo}} />
        <Text>-----------</Text>
        <Button onPress={this.handleAllPress} title="Start Both Foos" color="#841584" />
      </View>
    );
  }
}

几个小提醒 #

• 如果不用箭头函数定义子组件的方法，记得在constructor里手动绑定this，不然方法里的this会指向undefined：

  class Foo extends Component {
    constructor(props) {
      super(props);
      this.myFunction = this.myFunction.bind(this);
    }
  
    myFunction() {
      // 你的逻辑
    }
  }
  

• 虽然ref能解决这个问题，但React更推荐通过状态提升或者Context来管理跨组件的逻辑，不过像启动流程这种场景，用ref是完全合理的。
• 调用前检查ref是否存在，可以避免组件还没挂载或者已经卸载时出现报错。

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