React新手求教：如何实现可复用函数，解决多层组件传参重复定义问题

Hey there! I totally get where you're coming from—prop drilling (passing props through every intermediate component) gets tedious fast, especially when you have nested charts and dashboards like your setup. Let's break down a couple of straightforward, React-native ways to solve this without repeating those chartFilter functions in every layer.

1. Use React Context API (Best for Global/Shared State) #

React's Context API is built exactly for this scenario: sharing state or functions across components without passing props down every single level. Here's how to implement it for your filter use case:

Step 1: Create a Filter Context #

First, make a dedicated file to hold your context logic (keeps things clean):

// FilterContext.js
import { createContext, useContext, useState } from 'react';

// Create the context
const FilterContext = createContext();

// Provider component that wraps your app and provides filter state/functions
export function FilterProvider({ children }) {
  const [activeFilter, setActiveFilter] = useState(null);

  // Define your filter update function ONCE here
  const updateFilter = (newFilter) => {
    setActiveFilter(newFilter);
    // Add any extra logic here (like validation, logging, etc.)
  };

  return (
    <FilterContext.Provider value={{ activeFilter, updateFilter }}>
      {children}
    </FilterContext.Provider>
  );
}

// Custom hook to simplify accessing the context (optional but makes code cleaner)
export function useFilter() {
  return useContext(FilterContext);
}

Step 2: Wrap Your App with the Provider #

In your root App component, wrap everything that needs access to the filter with the FilterProvider:

// App.js
import { FilterProvider } from './FilterContext';
import Calls from './Calls';
import Home from './Home';
import FilterBar from './FilterBar';
import NavigationBar from './NavigationBar';

function App() {
  return (
    <FilterProvider>
      <NavigationBar />
      <FilterBar />
      <Calls />
      <Home />
    </FilterProvider>
  );
}

Step 3: Use the Context in Any Component #

Now, in your chart1 (or any chart/bar that needs to update the filter), you can directly access the updateFilter function without any props from parent components:

// Chart1.js
import { useFilter } from './FilterContext';

function Chart1() {
  const { updateFilter } = useFilter();

  const handleFilterClick = (filter) => {
    updateFilter(filter); // No more passing props up through CallsChart → Calls → App!
  };

  return (
    // Your chart JSX here—call handleFilterClick when a filter is selected
    <div onClick={() => handleFilterClick({ category: 'calls', value: 'recent' })}>
      Chart 1
    </div>
  );
}

And in your FilterBar, you can grab the current filter directly:

// FilterBar.js
import { useFilter } from './FilterContext';

function FilterBar() {
  const { activeFilter } = useFilter();

  return (
    <div className="filter-bar">
      Active Filter: {activeFilter ? JSON.stringify(activeFilter) : 'None'}
    </div>
  );
}

The best part? Intermediate components like CallsChart and Calls don't need to know anything about the filter at all. They just render their child components (like chart1)—this is exactly React's composition pattern in action: components focus on composing UI, not passing down irrelevant props.

2. Custom Hooks (For Encapsulating Reusable Logic) #

If you want to encapsulate even more logic (like filter validation or API calls tied to filters), you can extend the context with a custom hook. We already did this with useFilter above, but you could expand it:

// FilterContext.js (extended)
export function useFilter() {
  const { activeFilter, updateFilter } = useContext(FilterContext);

  // Add reusable logic here
  const resetFilter = () => updateFilter(null);
  const isFilterActive = () => !!activeFilter;

  return {
    activeFilter,
    updateFilter,
    resetFilter,
    isFilterActive
  };
}

Now any component using useFilter gets access to these helper functions too—no need to redefine them anywhere else.

3. Bonus: State Management Libraries (For Larger Apps) #

If your app grows and you need more complex state management (like handling multiple filters, async data, etc.), tools like Redux Toolkit or Zustand are great options. But for your current setup, Context + custom hooks is more than enough and keeps things simple for a React beginner.

Why This Fits React's Composition Pattern #

You mentioned you know React uses composition over inheritance—this approach aligns perfectly with that. Instead of forcing parent components to pass down functions (which is like inheritance-style "sharing"), we're providing a way for any component to "opt in" to the filter logic via the context. Intermediate components just act as containers for their children, no extra code required.

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