我们可以通过多少种方式将道具传递给反应中的所有子组件

Question

我有一个应用代码

import React from "react";
import { Route, Switch } from "react-router-dom";
import Minidrawer from './components/Drawer/Minidrawer'
import { makeStyles } from '@mui/styles';
import Box from '@mui/material/Box';
import Main from "./components/Main/Main";
import {useSelector} from 'react-redux'


const useStyles = makeStyles({
  container: {
    display: "flex"
  }
});

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

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

我必须将 currUser 传递给 App 中导入的所有子组件，但我不想重复代码，有哪些不同的方法可以实现这一点，以便所有组件可以访问 currUser?

Answer 1

您可以使用 redux 或上下文 API。

终极版：https://react-redux.js.org/

上下文 API：https://reactjs.org/docs/context.html

Answer 2

如果我明白你想做什么，你想将 props 传递给一个组件的所有子组件，如果组件是简单的组件你可以这样做：

import React from "react";
import Main from "./Main";
import PassPropsToNormalComponents from "./PassPropsToNormalComponents";

export default function App() {
  const user = {
    username: "lakhdar"
  };

  return (
    <div style={{ display: "flex" }}>
      <PassPropsToNormalComponents currUser={user}>
        <Main childText="home" />
        <Main childText="auth" />
        <Main childText="registerClient" />
      </PassPropsToNormalComponents>
    </div>
  );

这是 PassPropsToNormalComponents 文件

import React from "react";

export default function PassPropsToNormalComponents({ children, ...props }) {
  const childrenWithProps = React.Children.map(children, (child) => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { ...child.props, ...props });
    }
    return child;
  });

  return <>{childrenWithProps}</>;
}

但在您的情况下，将 props 传递给路由不会让路由将 props 传递给它们的渲染组件，因此我们需要一个额外的步骤：

首先是我们向父级提供道具的文件：

import React from "react";
import { Route, Switch } from "react-router-dom";
import Main from "./Main";
import PassPropsToRouteComponents from "./PassPropsToRouteComponents";

export default function App() {
  const user = {
    username: "lakhdar"
  };

  return (
    <div style={{ display: "flex" }}>
      <Switch>
        <PassPropsToRouteComponents currUser={user}>
          <Route
            exact
            from="/"
            render={(props) => {
              return <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} />}
          />
        </PassPropsToRouteComponents>
      </Switch>
    </div>
  );
}

最后，额外的步骤是获取渲染的元素并将其自己的 props + 来自父级的 props 传递给它，文件如下所示：

import React from "react";

export default function PassPropsToRouteComponents({ children, ...props }) {
  const childrenWithProps = React.Children.map(children, (child) => {
    if (React.isValidElement(child)) {
      const routerChild = child.props.render();
      return React.cloneElement(child, {
        ...child.props,
        render: () => {
          return React.cloneElement(routerChild, {
            ...routerChild.props,
            ...props
          });
        }
      });
    }
    return child;
  });

  return <>{childrenWithProps}</>;
}

link 到工作代码和框：https://codesandbox.io/s/gracious-meadow-dj53s

希望这就是您一直在寻找的。

我们可以通过多少种方式将道具传递给反应中的所有子组件

In how many ways we can pass props to all child components in react

javascript

reactjs

redux