reactjs - 发送 props 以从父布局组件 react 路由器组件

Question

我创建了一个名为 Main 的布局组件，它使用 React.cloneElement(children, { user: 'First Name'}) 将 user prop 发送到其子组件，但无法将该 user prop 传递给 Route 组件。

index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Main from "./Main.jsx";
import Home from "./Home.jsx";

const App = () => (
  <Router>
    <Main>
      <Route
        path="/"
        render={props => {
          return <Home {...props} />;
        }}
      />
    </Main>
  </Router>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Main.jsx

import React from "react";

export default props => {
  return <div>{React.cloneElement(props.children, { user: "Username" })}</div>;
};

Home.jsx

import React from "react";

export default props => {
  const { user } = props;
  return <div>User - {user}</div>;
};

但无法在 Home 组件中获取 user 属性。如果我不使用Route，那么它会传递到Home。

当我这样做时，Home 会收到 user 属性。

<Main>
   <Home />
</Main>

如何获取 user 属性并将其发送到 Route 渲染的组件？

场景的 Codesandox 链接 - https://codesandbox.io/s/kmyrj0zr8o

Answer 1

好吧，您必须将 Route 包装到自己的组件中。这个想法是捕获 props 并将其手动传递给 Route 的 render。

这里是修改后的来源:https://codesandbox.io/s/zx508v60yl

包装路线 (MyRoute.jsx)

import React from "react";
import { Route } from "react-router-dom";

export default class MyRoute extends React.Component {
    render() {
        var { Component, path, exact, passedProps } = this.props;
        return (
            <Route
                path={path}
                exact={exact}
                render={props => <Component {...props} {...passedProps} />}
            />
        );
    }
}

修改Main.jsx

import React from "react";

export default props => {
    return (
        <div>
            {React.cloneElement(props.children, {
                passedProps: {
                    user: "Username"
                }
            })}
        </div>
    );
};

然后将index.js中的Route更改为MyRoute

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Main from "./Main.jsx";
import Home from "./Home.jsx";
import MyRoute from "./MyRoute.jsx";

const App = () => (
    <Router>
        <Main>
            <MyRoute path="/" Component={Home} />
        </Main>
    </Router>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);