如何将React子组件的filterBySearch函数经父组件传递给同级子组件？

1. 让Products把过滤函数传给App #

Products里的filterBySearch是内部函数，要让App拿到它，给Products新增一个props回调（比如onFilterFunctionReady），在组件挂载后把filterBySearch传给这个回调：

修改后的Products组件代码片段：

import { useEffect, useState } from 'react';

// 假设你有Product类型定义
type Product = { name: string; /* 其他字段 */ };

const Products = ({ onFilterFunctionReady }: { onFilterFunctionReady: (fn: (value: string) => void) => void }) => {
  const [allProducts, setAllProducts] = useState<Product[]>([]);
  const sourceProducts: Product[] = []; // 你的原始产品数据

  const filterBySearch = (value: string) => {
    setAllProducts((prevProducts) => {
      const filtered = sourceProducts.filter((product) =>
        product.name.toLowerCase().includes(value.toLowerCase())
      );
      return filtered;
    });
  };

  // 组件挂载时把过滤函数传给App
  useEffect(() => {
    onFilterFunctionReady(filterBySearch);
  }, [onFilterFunctionReady, filterBySearch]);

  return (
    <div className="products">
      {/* 产品列表渲染 */}
    </div>
  );
};

export default Products;

2. App作为中间层转发函数给Navbar #

在App组件中，用状态保存从Products拿到的过滤函数，再把这个函数作为props传递给Navbar：

App组件代码片段：

import { useState } from 'react';
import Navbar from './Navbar';
import Products from './Products';

const App = () => {
  // 保存过滤函数，初始为null
  const [searchFilter, setSearchFilter] = useState<((value: string) => void) | null>(null);

  // 接收Products传来的过滤函数
  const getFilterFunction = (fn: (value: string) => void) => {
    setSearchFilter(fn);
  };

  return (
    <div className="app">
      {/* 把过滤函数传给Navbar */}
      <Navbar onSearch={searchFilter} />
      {/* 传递回调给Products */}
      <Products onFilterFunctionReady={getFilterFunction} />
    </div>
  );
};

export default App;

3. Navbar调用过滤函数处理输入 #

Navbar里的搜索输入框，在值变化时调用App传过来的过滤函数，注意先判断函数是否存在，避免报错：

Navbar组件代码片段：

const Navbar = ({ onSearch }: { onSearch: ((value: string) => void) | null }) => {
  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    // 确保函数已传递再调用
    if (onSearch) {
      onSearch(value);
    }
  };

  return (
    <nav className="navbar">
      <input
        type="text"
        placeholder="搜索产品"
        onChange={handleSearch}
      />
      {/* Navbar其他元素 */}
    </nav>
  );
};

export default Navbar;

额外优化点 #

如果sourceProducts会动态更新，要把它加入useEffect的依赖数组，保证传给App的filterBySearch是最新的。另外，也可以用useRef代替useState存储过滤函数，减少不必要的组件重渲染：

// App里改用ref
const filterRef = useRef<((value: string) => void) | null>(null);
const getFilterFunction = (fn: (value: string) => void) => {
  filterRef.current = fn;
};

// 传给Navbar时用ref.current
<Navbar onSearch={filterRef.current} />

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