实现两个独立React组件间的搜索功能方案咨询

针对你的需求，推荐两种最实用的实现方案，既能保证两个组件完全独立，又能实现搜索联动和页面跳转：

方案一：React Router 路由传参（推荐，适配跳转场景） #

通过URL查询参数传递搜索关键词，是跳转页面场景下最符合浏览器行为的方案，组件完全解耦，刷新页面也不会丢失搜索状态。

实现步骤： #

1. 配置路由，为卡片页面设置独立路由
2. SearchBar 提交搜索后，携带关键词跳转到卡片页面
3. 卡片组件从URL中提取关键词，过滤展示数据

代码示例：

SearchBar 组件

import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

function SearchBar() {
  const [keyword, setKeyword] = useState('');
  const navigate = useNavigate();

  const handleSearch = () => {
    if (keyword.trim()) {
      // 编码关键词后通过查询参数传递
      navigate(`/cards?keyword=${encodeURIComponent(keyword)}`);
    }
  };

  return (
    <div className="search-bar">
      <input
        type="text"
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
        placeholder="输入关键词搜索..."
      />
      <button onClick={handleSearch}>搜索</button>
    </div>
  );
}

export default SearchBar;

卡片展示组件（CardList）

import { useSearchParams } from 'react-router-dom';

// 模拟业务数据
const mockCardData = [
  { id: 1, title: 'React 组件设计', content: '高复用组件的实现思路' },
  { id: 2, title: 'React Hooks 实战', content: 'useState 与 useEffect 进阶用法' },
  { id: 3, title: '性能优化技巧', content: 'React 渲染性能提升方案' }
];

function CardList() {
  const [searchParams] = useSearchParams();
  const searchKeyword = searchParams.get('keyword') || '';

  // 关键词过滤逻辑
  const filteredCards = mockCardData.filter(card => 
    card.title.toLowerCase().includes(searchKeyword.toLowerCase()) ||
    card.content.toLowerCase().includes(searchKeyword.toLowerCase())
  );

  return (
    <div className="card-container">
      {filteredCards.length ? (
        filteredCards.map(card => (
          <div key={card.id} className="card-item">
            <h3>{card.title}</h3>
            <p>{card.content}</p>
          </div>
        ))
      ) : (
        <p>未找到匹配的卡片</p>
      )}
    </div>
  );
}

export default CardList;

路由配置（App.js）

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import SearchBar from './SearchBar';
import CardList from './CardList';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<SearchBar />} />
        <Route path="/cards" element={<CardList />} />
      </Routes>
    </Router>
  );
}

export default App;

方案优势： #

• 组件完全独立，无直接依赖
• 搜索状态通过URL持久化，刷新页面不会丢失
• 符合用户对页面跳转的预期，支持浏览器前进/后退

方案二：React Context 全局状态管理（适合无需URL同步的场景） #

如果不需要将搜索关键词同步到URL，可以用Context实现全局状态共享，组件通过上下文通信，无需直接传递props。

实现步骤： #

1. 创建搜索上下文，管理关键词状态
2. 在根组件中提供上下文
3. SearchBar 更新全局状态并跳转，CardList 从上下文读取关键词过滤数据

代码示例：

创建 SearchContext.js

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

const SearchContext = createContext();

export function SearchProvider({ children }) {
  const [searchKeyword, setSearchKeyword] = useState('');

  return (
    <SearchContext.Provider value={{ searchKeyword, setSearchKeyword }}>
      {children}
    </SearchContext.Provider>
  );
}

// 自定义Hook简化上下文调用
export function useSearch() {
  return useContext(SearchContext);
}

根组件包裹上下文（App.js）

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { SearchProvider } from './SearchContext';
import SearchBar from './SearchBar';
import CardList from './CardList';

function App() {
  return (
    <SearchProvider>
      <Router>
        <Routes>
          <Route path="/" element={<SearchBar />} />
          <Route path="/cards" element={<CardList />} />
        </Routes>
      </Router>
    </SearchProvider>
  );
}

export default App;

SearchBar 组件

import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useSearch } from './SearchContext';

function SearchBar() {
  const [keyword, setKeyword] = useState('');
  const { setSearchKeyword } = useSearch();
  const navigate = useNavigate();

  const handleSearch = () => {
    if (keyword.trim()) {
      setSearchKeyword(keyword);
      navigate('/cards');
    }
  };

  return (
    <div className="search-bar">
      <input
        type="text"
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
        placeholder="输入关键词搜索..."
      />
      <button onClick={handleSearch}>搜索</button>
    </div>
  );
}

export default SearchBar;

CardList 组件

import { useSearch } from './SearchContext';

const mockCardData = [
  { id: 1, title: 'React 组件设计', content: '高复用组件的实现思路' },
  { id: 2, title: 'React Hooks 实战', content: 'useState 与 useEffect 进阶用法' },
  { id: 3, title: '性能优化技巧', content: 'React 渲染性能提升方案' }
];

function CardList() {
  const { searchKeyword } = useSearch();

  const filteredCards = mockCardData.filter(card => 
    card.title.toLowerCase().includes(searchKeyword.toLowerCase()) ||
    card.content.toLowerCase().includes(searchKeyword.toLowerCase())
  );

  return (
    <div className="card-container">
      {filteredCards.length ? (
        filteredCards.map(card => (
          <div key={card.id} className="card-item">
            <h3>{card.title}</h3>
            <p>{card.content}</p>
          </div>
        ))
      ) : (
        <p>未找到匹配的卡片</p>
      )}
    </div>
  );
}

export default CardList;

方案优势： #

• 组件无需依赖URL，状态全局共享
• 适合单页应用内的组件联动，不需要页面刷新

方案选择建议 #

• 如果需要跳转页面并保留搜索状态（支持刷新、前进后退），优先选择方案一
• 如果仅需单页内组件联动，不需要URL同步状态，可以选择方案二

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