映射渲染组件时，如何避免Prop Drilling给深层组件传值？

针对你遍历数据生成组件、深层子组件需要访问restaurant数据的场景，这里有几种无需给每个组件都套Provider的解决方案：

方案1：组件组合（推荐，无额外API依赖） #

核心思路是跳过中间组件的props传递，直接在顶层把需要数据的组件和数据绑定，通过children或自定义props传递给上层组件，中间组件只负责渲染内容，不用关心数据。

修改后的代码：

import data from './data'

export default function App() {
  return (
    <div className="App">
      {data.map((restaurant) => {
        // 直接在App层将restaurant传给NestedComponentThree
        return (
          <NestedComponentOne>
            <NestedComponentThree restaurant={restaurant} />
          </NestedComponentOne>
        )
      })}
    </div>
  );
}

// 中间组件仅渲染children，无需处理数据
const NestedComponentOne = ({ children }) => <div>{children}</div>
const NestedComponentTwo = ({ children }) => <div>{children}</div>

// 直接接收restaurant props
const NestedComponentThree = ({ restaurant }) => <div>{restaurant}</div>

如果必须保持NestedComponentOne→NestedComponentTwo→NestedComponentThree的层级，也可以让NestedComponentOne接收restaurant后逐层传递——这种方式虽然是显式传递，但仅需传递两次，不算严重的prop drilling，适合结构简单的场景：

import data from './data'

export default function App() {
  return (
    <div className="App">
      {data.map((restaurant) => {
        return <NestedComponentOne restaurant={restaurant} />
      })}
    </div>
  );
}

const NestedComponentOne = ({ restaurant }) => <div><NestedComponentTwo restaurant={restaurant} /></div>
const NestedComponentTwo = ({ restaurant }) => <div><NestedComponentThree restaurant={restaurant} /></div>
const NestedComponentThree = ({ restaurant }) => <div>{restaurant}</div>

方案2：使用React Context（适合深层组件场景） #

你觉得给每个组件套Provider不合适，但可以通过封装容器组件让代码更整洁，这种方式对层级极深的组件非常友好：

首先创建单个餐厅的Context：

// RestaurantContext.js
import { createContext, useContext } from 'react'

const RestaurantContext = createContext(null)

export const RestaurantProvider = RestaurantContext.Provider
export const useRestaurant = () => {
  const context = useContext(RestaurantContext)
  if (!context) {
    throw new Error('useRestaurant必须在RestaurantProvider内部使用')
  }
  return context
}

然后在遍历中用Provider包裹组件，在NestedComponentThree里通过自定义Hook获取数据：

import data from './data'
import { RestaurantProvider, useRestaurant } from './RestaurantContext'

export default function App() {
  return (
    <div className="App">
      {data.map((restaurant) => {
        return (
          <RestaurantProvider value={restaurant}>
            <NestedComponentOne />
          </RestaurantProvider>
        )
      })}
    </div>
  );
}

const NestedComponentOne = () => <div><NestedComponentTwo /></div>
const NestedComponentTwo = () => <div><NestedComponentThree /></div>

// 使用自定义Hook获取数据
const NestedComponentThree = () => {
  const restaurant = useRestaurant()
  return <div>{restaurant}</div>
}

这种方式虽然每个组件都套了Provider，但经封装后代码整洁，且彻底避免了多层prop传递，适合组件层级很深的场景。

方案3：组件逻辑内联（快速解决） #

如果组件无需复用，也可以直接在App里内联整个组件树，直接传递数据：

import data from './data'

export default function App() {
  return (
    <div className="App">
      {data.map((restaurant) => {
        return (
          <div>
            <div>
              <div>{restaurant}</div>
            </div>
          </div>
        )
      })}
    </div>
  );
}

这种方式最直接，但缺点是组件无法复用，适合简单场景。

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