React如何向Route渲染的布局Body、侧边栏等子组件传递Props？

有两种常用实现方式，按需选择即可：

方案1：使用 Context 跨层级传递（推荐） #

适合需要传递的参数、函数较多，或子组件层级较深的场景：

第一步：改造 default.jsx 提供 Context #

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

// 创建布局上下文
const DefaultLayoutContext = createContext()
// 封装自定义Hook，方便子组件调用
export const useDefaultLayout = () => useContext(DefaultLayoutContext)

const Default = ({children}) => {
  // 定义你需要传递的状态和函数，示例如下
  const [sidebarOpen, setSidebarOpen] = useState(true)
  const toggleSidebar = () => setSidebarOpen(prev => !prev)
  const activeNavKey = '/dashboard'

  // 要传递给子组件的所有数据和方法
  const layoutPayload = {
    sidebarOpen,
    toggleSidebar,
    activeNavKey
  }

  return (
    <Layout>
      <Layout.Body id="main-content">
        <div>
          {/* 用Provider包裹children，注入数据 */}
          <DefaultLayoutContext.Provider value={layoutPayload}>
            {children}
          </DefaultLayoutContext.Provider>
        </div>
      </Layout.Body>
    </Layout>
  )
}
export default Default

第二步：子页面组件直接获取数据 #

在任意被该布局包裹的路由组件中，直接调用自定义Hook即可拿到布局传递的所有内容：

import { useDefaultLayout } from './default.jsx'

const Dashboard = () => {
  const { toggleSidebar, activeNavKey } = useDefaultLayout()
  return <button onClick={toggleSidebar}>切换侧边栏</button>
}

方案2：改造children为render函数传递 #

不需要额外创建Context，适合传递内容较少的场景：

第一步：改造 default.jsx 传参给children #

const Default = ({children}) => {
  // 定义你需要传递的状态和函数，示例如下
  const [sidebarOpen, setSidebarOpen] = useState(true)
  const toggleSidebar = () => setSidebarOpen(prev => !prev)
  const layoutPayload = { sidebarOpen, toggleSidebar }

  return (
    <Layout>
      <Layout.Body id="main-content">
        <div>
          {/* 将children作为函数调用，传入参数 */}
          {children(layoutPayload)}
        </div>
      </Layout.Body>
    </Layout>
  )
}

第二步：改造 App.js 接收参数并传递给路由组件 #

// ... 原有代码
return <Route key={`layout-${layoutName}`} exact={true} path={layoutRoutes} render={() => {
  return (
    <ScrollToTop>
      {/* children改为函数形式，接收布局传递的参数 */}
      <LayoutTag>
        {(layoutProps) => (
          <>
            <h1>sdsdddscxcxs</h1>
            <Switch>
              {routesGroupedByLayouts[layoutName].map(route => (
                <Route key={route.path}
                       path={route.path}
                       exact={route.exact === true}
                       // 把布局参数、路由原生参数都传给页面组件
                       render={(routeProps) => <route.component 
                         fallback={<Loading />} 
                         {...routeProps} 
                         {...layoutProps}
                       />} 
                />
              ))}
            </Switch>
          </>
        )}
      </LayoutTag>
    </ScrollToTop>
  )
}} />

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