React Native：父组件触发点击时如何调用子组件的closeMenu方法？

嗨，我来帮你搞定父组件调用子组件方法的问题～你的核心需求是在父组件的点击事件里触发子组件SearchBar的closeMenu方法，之前的尝试没生效大概率是ref的使用方式不对，下面给你两种靠谱的解决方案：

这是React官方推荐的类组件获取子组件实例的方式，比你之前用的字符串ref更可靠。

步骤1：在父组件里创建ref实例 #

修改你的Products组件构造函数，添加ref实例：

class Products extends Component {
  constructor(props) {
    super(props);
    // 创建用于关联子组件的ref
    this.searchBarRef = React.createRef();
    this.hideSearchBar = this.hideSearchBar.bind(this);
  }

步骤2：绑定ref到子组件 #

在渲染SearchBar的时候，把ref属性指向刚才创建的实例：

render() {
  return (
    <div>
      {/* 绑定ref到SearchBar组件 */}
      <SearchBar ref={this.searchBarRef} />
      {/* 触发点击的元素，比如按钮 */}
      <button onClick={this.hideSearchBar}>关闭搜索菜单</button>
    </div>
  );
}

步骤3：在点击方法里调用子组件方法 #

修改hideSearchBar，直接通过ref获取子组件实例并调用closeMenu：

hideSearchBar(e) {
  // 先判断current是否存在，避免报错
  if (this.searchBarRef.current) {
    this.searchBarRef.current.closeMenu();
  }
}

如果你用的是函数式的SearchBar，需要配合forwardRef和useImperativeHandle来暴露方法给父组件：

子组件SearchBar修改： #

import React, { forwardRef, useImperativeHandle, useState } from 'react';

const SearchBar = forwardRef((props, ref) => {
  const [menuVisible, setMenuVisible] = useState(true);

  // 定义关闭菜单的方法
  const closeMenu = () => {
    setMenuVisible(false);
    console.log('搜索菜单已关闭');
  };

  // 把closeMenu方法暴露给父组件的ref
  useImperativeHandle(ref, () => ({
    closeMenu
  }));

  return (
    <div>
      {menuVisible && <div>这里是搜索菜单内容</div>}
    </div>
  );
});

export default SearchBar;

父组件的用法和方案一完全一致，createRef绑定后就能调用方法啦。

你之前可能踩的坑： #

• 用了已被React弃用的字符串ref（this.refs.SearchBar），这种方式在组件更新时可能出现实例获取不到的问题；
• 没有确保子组件的closeMenu是实例方法（类组件里要绑定this，或者用箭头函数定义）；
• 调用方法时没有判断ref的current是否存在，导致报错中断执行。

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