React中如何将SearchBar组件输入值传递给SearchCompany等多个组件

根据你的组件层级关系和项目复杂度，可按优先级选择以下最优实现方案：

方案1：状态提升（优先推荐，适用组件共享最近公共父节点的轻量场景） #

这是React官方推荐的轻量跨组件传值方案，无需引入额外依赖，实现成本最低。

实现逻辑 #

• 将搜索词状态提升到两个组件的最近公共父组件中管理
• 给SearchBar组件传递onChange回调，用来更新父组件的搜索词状态
• 父组件将搜索词状态通过props传递给所有需要该值的SearchCompany组件

代码示例 #

修改后的SearchBar组件：

export const SearchBar: React.FC<{ onSearchChange: (value: string) => void }> = ({ onSearchChange }) => {
  const handleFilter = (event: React.ChangeEvent<HTMLInputElement>) => {
    const searchWord = event.target.value
    onSearchChange(searchWord)
  }
  return <input type="text" onChange={handleFilter} placeholder="Type your search"/>
}

公共父组件代码：

import { useState } from 'react'
import { SearchBar } from './SearchBar'
import { SearchCompany } from './SearchCompany'

const ParentComponent: React.FC = () => {
  // 父组件统一管理搜索词状态
  const [searchWord, setSearchWord] = useState('')

  return (
    <div>
      <SearchBar onSearchChange={setSearchWord} />
      {/* 可传递给任意多个SearchCompany组件 */}
      <SearchCompany text={searchWord} />
      <SearchCompany text={searchWord} />
    </div>
  )
}

SearchCompany组件无需修改，保持原有逻辑即可。

方案2：React Context API（适用跨多层级、多不相关组件共享的场景） #

如果组件层级太深、props透传层级超过3层，或者需要在整个应用/模块范围内共享搜索词，用Context API可避免props地狱问题。

实现逻辑 #

1. 定义搜索词的Context，包含状态和更新方法
2. 用Context Provider包裹需要共享搜索词的组件范围
3. SearchBar组件内调用Context的更新方法修改搜索词
4. 所有SearchCompany组件内直接消费Context的搜索词值

代码示例 #

首先定义SearchContext.ts：

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

type SearchContextType = {
  searchWord: string
  setSearchWord: (value: string) => void
}

const SearchContext = createContext<SearchContextType | undefined>(undefined)

// 封装Provider组件，方便使用
export const SearchProvider = ({ children }: { children: ReactNode }) => {
  const [searchWord, setSearchWord] = useState('')
  return (
    <SearchContext.Provider value={{ searchWord, setSearchWord }}>
      {children}
    </SearchContext.Provider>
  )
}

// 封装自定义hooks，简化Context消费
export const useSearch = () => {
  const context = useContext(SearchContext)
  if (!context) throw new Error('useSearch must be used within SearchProvider')
  return context
}

修改后的SearchBar组件：

import { useSearch } from './SearchContext'

export const SearchBar: React.FC = () => {
  const { setSearchWord } = useSearch()
  const handleFilter = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSearchWord(event.target.value)
  }
  return <input type="text" onChange={handleFilter} placeholder="Type your search"/>
}

修改后的SearchCompany组件：

import { useSearch } from './SearchContext'

export const SearchCompany: React.FC = () => {
  const { searchWord } = useSearch()
  // 直接使用searchWord即可，不需要通过props接收
  return <div></div>
}

最后在模块根/应用根组件包裹Provider：

import { SearchProvider } from './SearchContext'
import { SearchBar } from './SearchBar'
import { SearchCompany } from './SearchCompany'

const App = () => {
  return (
    <SearchProvider>
      <SearchBar />
      {/* 任意层级的SearchCompany都可以直接获取搜索词 */}
      <SearchCompany />
      <div>
        <div>
          <SearchCompany />
        </div>
      </div>
    </SearchProvider>
  )
}

方案3：全局状态管理工具（适用已有状态管理体系的中大型项目） #

如果项目已经接入了Zustand、Redux、Jotai、Mobx等全局状态管理工具，直接在全局状态中定义searchWord字段和更新方法，SearchBar调用更新方法，所有SearchCompany组件直接订阅该状态即可，适配项目已有技术栈即可。

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