如何将Grid组件的引用传递给Filter组件以实现二者功能联动？

• 首先在App组件内声明对应的ref实例：
  如果你使用的是函数组件，先从React中导入useRef，在组件逻辑顶部声明：

  import { useRef } from 'react';
  // App组件内部
  const ref1 = useRef(null);
  

  如果你使用类组件，就用createRef创建实例：

  // App组件内部
  ref1 = React.createRef();
  

• 确保Grid组件支持接收ref：
  如果Grid是你自定义的函数组件，默认无法直接接收ref属性，需要用forwardRef包裹Grid组件定义，同时将接收到的ref绑定到你需要暴露的网格实例/根DOM节点上：

  import { forwardRef } from 'react';
  const Grid = forwardRef((props, ref) => {
    // 原有Grid组件逻辑
    return <div ref={ref} {/* 网格原有属性 */}> {/* 网格内容 */} </div>
  })
  export default Grid;
  

  如果Grid是第三方组件，直接查阅官方文档确认ref暴露的实例属性和方法即可，无需自己包裹forwardRef。
• 在Filter组件中使用传入的gridRef：
  Filter组件直接接收gridRef作为props即可，注意必须等待组件挂载完成后再访问gridRef.current才能拿到有效值，可以放在事件回调、useEffect回调中使用，示例如下：

  function Filter({ gridRef }) {
    // 示例：点击筛选按钮后刷新网格数据
    const handleFilter = () => {
      // 调用Grid暴露的刷新方法
      gridRef.current?.reloadData();
    }
    return <button onClick={handleFilter}>筛选</button>
  }
  

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