React中无需重复编码向所有子组件传递props的实现方式有哪些？

方案1：子组件直接从Redux取数据（最推荐） #

你的currUser本身已经存储在Redux的auth模块中，完全不需要通过props层层传递，直接在需要用到的子组件内部调用useSelector取值即可，是改造成本最低的方案。

示例改造：在Minidrawer、Main组件内部直接取值

// Minidrawer / Main 组件内部代码
import {useSelector} from 'react-redux'

function Minidrawer() {
  const currUser = useSelector(state => state.auth)
  // 原有组件逻辑保持不变
}

改造完成后，App组件中所有传递currUser的代码都可以直接删除。

方案2：封装公共路由渲染逻辑 #

针对路由部分重复渲染Main组件、重复传参的问题，可以把重复的render逻辑抽成公共函数统一处理传参。

App组件改造示例：

export default function App() {
  const classes = useStyles();
  const user = useSelector((state) => state.auth);

  // 抽离公共渲染函数
  const renderMain = (childText) => (props) => <Main childText={childText} currUser={user} {...props} />

  return (
    <Box sx={{ display: 'flex' }}>
      <Minidrawer currUser={user}/>
      <Switch>
        <Route exact from="/" render={renderMain("home")} />
        <Route exact path="/auth" render={renderMain("auth")} />
        <Route exact path="/register-client" render={renderMain("registerClient")} />
      </Switch>
    </Box>
  );
}

改造后路由部分无需重复写传currUser的代码，Minidrawer的传参如果需要简化可以配合方案1处理。

方案3：使用React Context做跨层级传值 #

如果后续还有大量深层级的组件需要用到currUser，且不想每个组件都写一遍useSelector，可以用Context做全局注入。

第一步：新建Context文件

// UserContext.js
import {createContext, useContext} from 'react'
const UserContext = createContext(null)
export const UserProvider = UserContext.Provider
// 封装取值Hook，简化调用
export const useUser = () => useContext(UserContext)

第二步：在App组件中注入全局值

import {UserProvider} from './UserContext'

export default function App() {
  const classes = useStyles();
  const user = useSelector((state) => state.auth);

  return (
    <UserProvider value={user}>
      <Box sx={{ display: 'flex' }}>
        <Minidrawer />
        <Switch>
          <Route exact from="/" render={props => <Main childText="home" {...props} />} />
          <Route exact path="/auth" render={props => <Main childText="auth" {...props} />} />
          <Route exact path="/register-client" render={props => <Main childText="registerClient" {...props} />} />
        </Switch>
      </Box>
    </UserProvider>
  );
}

第三步：在需要用currUser的组件中调用Hook取值

import {useUser} from '../UserContext'
function Minidrawer() {
  const currUser = useUser()
  // 原有逻辑不变
}

方案4：封装高阶组件（HOC）统一注入属性 #

如果你不想修改原有组件的内部取值逻辑，依然希望通过props接收currUser，可以封装高阶组件自动注入属性。

第一步：定义高阶组件

// withUser.js
import {useSelector} from 'react-redux'
const withUser = (Component) => (props) => {
  const currUser = useSelector(state => state.auth)
  return <Component currUser={currUser} {...props} />
}
export default withUser

第二步：包裹需要接收currUser的组件

// Minidrawer 组件导出代码
import withUser from './withUser'
function Minidrawer(props) {
  // 原有逻辑不变，依然可以通过props.currUser取值
}
export default withUser(Minidrawer)

// Main 组件同理做同样的包裹处理即可

改造完成后，App组件中所有传递currUser的代码都可以直接删除。

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