React兄弟组件如何传递props？SearchBar的搜索状态怎么传给ProductsList？

步骤1：创建共享搜索上下文 #

首先新建SearchContext.js文件，封装状态和自定义钩子简化调用：

import { createContext, useContext, useState } from 'react';

const SearchContext = createContext();

// 状态提供者组件，包裹需要共享搜索状态的组件范围
export const SearchProvider = ({ children }) => {
  const [search, setSearch] = useState('');
  return (
    <SearchContext.Provider value={{ search, setSearch }}>
      {children}
    </SearchContext.Provider>
  );
};

// 自定义钩子，直接获取搜索相关状态和方法
export const useSearch = () => useContext(SearchContext);

步骤2：在公共父组件Home中注入上下文 #

将需要共享状态的所有组件都包裹在SearchProvider内：

import { SearchProvider } from './SearchContext';

const Home = () => {
    return ( 
        <SearchProvider>
            <Navigation />
            <SearchBar />
            <Wrapper>
                <Filters />
                <ProductsList />
            </Wrapper>
        </SearchProvider>
     );
}

步骤3：改造SearchBar组件，使用上下文提供的修改方法 #

删除SearchBar内部的useState定义，改为从上下文获取setSearch：

import { useSearch } from './SearchContext';

const SearchBar = () => {
  const { setSearch } = useSearch();

  const handleSetSearch = (e) => {
    setSearch(e.target.value);
  }

  return ( 
    <Wrapper>
        <StyledTitle>inPal Search</StyledTitle>
        <InputWrapper>
            <StyledInput type="text" placeholder="Write something..." onChange={(e) => handleSetSearch(e)} />
            <SearchIcon src={searchIcon} alt="Search" />
        </InputWrapper>
    </Wrapper>
  );
}

步骤4：在ProductsList组件中获取搜索值 #

直接调用自定义钩子拿到search状态即可用于列表过滤、接口请求等逻辑：

import { useSearch } from './SearchContext';

const ProductsList = () => {
  const { search } = useSearch();

  // 示例：根据搜索关键词过滤产品列表
  // const filteredProducts = 原始产品列表.filter(item => item.name.includes(search))

  return (
    // 原有列表渲染逻辑
  )
}

补充说明 #

如果你的项目组件层级较浅，也可以选择更简单的状态提升方案：直接把search状态和setSearch方法定义在Home组件中，通过props分别传给SearchBar和ProductsList即可，不需要引入Context。Context更适合多个层级、多个组件需要共享同一状态的场景。

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