React中如何实现子组件状态值跨组件传递？含具体场景问询

Hey there! Let's break down the best ways to pass state from your SearchForm.js component to SearchHistory.js in React, based on your project structure. Here are the most practical approaches you can implement:

1. State Lifting (状态提升) #

This is React's go-to, lightweight solution for sharing state between non-directly related components. The idea is to move the shared state up to the closest common parent component of SearchForm and SearchHistory, then pass it down via props.

Step-by-step implementation: #

Assuming your top-level App.js renders both Header (which contains SearchForm) and SearchHistory, we'll lift the state here:

// src/App.js
import Header from './Component/Header';
import SearchHistory from './Component/SearchHistory';
import { useState } from 'react';

function App() {
  // Shared state for search history
  const [searchHistory, setSearchHistory] = useState([]);

  // Callback to update history from SearchForm
  const addToHistory = (searchTerm) => {
    setSearchHistory(prev => [...prev, searchTerm]);
  };

  return (
    <div className="app">
      {/* Pass callback to Header, which forwards it to SearchForm */}
      <Header onSearchSubmit={addToHistory} />
      {/* Pass history state to SearchHistory */}
      <SearchHistory history={searchHistory} />
    </div>
  );
}

export default App;

Update Header.js to forward the callback to SearchForm:

// src/Component/Header.js
import Navbar from "./Navbar";
import SearchForm from "./SearchForm";

function Header({ onSearchSubmit }) {
  return (
    <div className="header__wrapper">
      <Navbar />
      <SearchForm onSubmit={onSearchSubmit} />
    </div>
  );
}

export default Header;

Modify SearchForm.js to trigger the callback on submission:

// src/Component/SearchForm.js
import { useState } from 'react';

function SearchForm({ onSubmit }) {
  const [searchTerm, setSearchTerm] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (searchTerm.trim()) {
      onSubmit(searchTerm);
      setSearchTerm('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search..."
      />
      <button type="submit">Search</button>
    </form>
  );
}

export default SearchForm;

Finally, render the history in SearchHistory.js:

// src/Component/SearchHistory.js
function SearchHistory({ history }) {
  return (
    <div className="search-history">
      <h3>Search History</h3>
      {history.length === 0 ? (
        <p>No search history yet</p>
      ) : (
        <ul>
          {history.map((term, index) => (
            <li key={index}>{term}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default SearchHistory;

Best for: Simple apps with shallow component hierarchies, no extra dependencies needed.

2. React Context API #

If your app has deep component trees or multiple components need access to the search history, state lifting can lead to props drilling (passing props through layers of components that don't need them). Context API solves this by making state globally accessible to components that need it.

Step-by-step implementation: #

First, create a context for search state:

// src/Context/SearchContext.js
import { createContext, useState, useContext } from 'react';

const SearchContext = createContext();

export function SearchProvider({ children }) {
  const [searchHistory, setSearchHistory] = useState([]);

  const addToHistory = (searchTerm) => {
    setSearchHistory(prev => [...prev, searchTerm]);
  };

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

// Custom hook to simplify context access
export function useSearch() {
  return useContext(SearchContext);
}

Wrap your app with the provider in App.js:

// src/App.js
import { SearchProvider } from './Context/SearchContext';
import Header from './Component/Header';
import SearchHistory from './Component/SearchHistory';

function App() {
  return (
    <SearchProvider>
      <div className="app">
        <Header />
        <SearchHistory />
      </div>
    </SearchProvider>
  );
}

export default App;

Update SearchForm.js to use the context hook:

// src/Component/SearchForm.js
import { useState } from 'react';
import { useSearch } from '../Context/SearchContext';

function SearchForm() {
  const [searchTerm, setSearchTerm] = useState('');
  const { addToHistory } = useSearch();

  const handleSubmit = (e) => {
    e.preventDefault();
    if (searchTerm.trim()) {
      addToHistory(searchTerm);
      setSearchTerm('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search..."
      />
      <button type="submit">Search</button>
    </form>
  );
}

export default SearchForm;

Update SearchHistory.js to access the state via context:

// src/Component/SearchHistory.js
import { useSearch } from '../Context/SearchContext';

function SearchHistory() {
  const { searchHistory } = useSearch();

  return (
    <div className="search-history">
      <h3>Search History</h3>
      {searchHistory.length === 0 ? (
        <p>No search history yet</p>
      ) : (
        <ul>
          {searchHistory.map((term, index) => (
            <li key={index}>{term}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default SearchHistory;

Best for: Apps with deep component trees or multiple components needing access to the same state.

3. State Management Libraries (e.g., Redux Toolkit) #

For large, complex apps with lots of global state to manage, a dedicated state library like Redux Toolkit is a solid choice. It centralizes state management and makes it easy to share state across any component.

Step-by-step implementation: #

First, install dependencies:

npm install @reduxjs/toolkit react-redux

Create a slice to manage search state:

// src/features/search/searchSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  history: []
};

const searchSlice = createSlice({
  name: 'search',
  initialState,
  reducers: {
    addSearchTerm: (state, action) => {
      state.history.push(action.payload);
    }
  }
});

export const { addSearchTerm } = searchSlice.actions;
export default searchSlice.reducer;

Configure the Redux store:

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import searchReducer from '../features/search/searchSlice';

export const store = configureStore({
  reducer: {
    search: searchReducer
  }
});

Wrap your app with the Redux provider in index.js:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

Update SearchForm.js to dispatch actions:

// src/Component/SearchForm.js
import { useState } from 'react';
import { useDispatch } from 'react-redux';
import { addSearchTerm } from '../features/search/searchSlice';

function SearchForm() {
  const [searchTerm, setSearchTerm] = useState('');
  const dispatch = useDispatch();

  const handleSubmit = (e) => {
    e.preventDefault();
    if (searchTerm.trim()) {
      dispatch(addSearchTerm(searchTerm));
      setSearchTerm('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search..."
      />
      <button type="submit">Search</button>
    </form>
  );
}

export default SearchForm;

Update SearchHistory.js to select state from the store:

// src/Component/SearchHistory.js
import { useSelector } from 'react-redux';

function SearchHistory() {
  const searchHistory = useSelector(state => state.search.history);

  return (
    <div className="search-history">
      <h3>Search History</h3>
      {searchHistory.length === 0 ? (
        <p>No search history yet</p>
      ) : (
        <ul>
          {searchHistory.map((term, index) => (
            <li key={index}>{term}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default SearchHistory;

Best for: Large-scale apps with complex state logic and multiple cross-component state dependencies.

Final Recommendations #

• Start with State Lifting if your app is simple and components are close in the hierarchy.
• Use Context API if you need to avoid props drilling or share state across several components.
• Opt for Redux Toolkit (or similar libraries like Zustand/Jotai) for large apps with extensive state management needs.

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