如何将功能组件包装到作为高阶组件的布局组件中？

Question

我有我的Layout.js，如下图：

import React from 'react';
import classes from './Layout.module.scss';
export default function Layout(props) {
  const Component = props.renderComponent;
  return (
    <div className={classes.Layout}>
      <header></header>
      <main>
        <Component />
      </main>
      <footer></footer>
    </div>
  );
}

这是我的app.js 文件：

import React from 'react';
import './App.scss';
import { Route, Switch, withRouter, Redirect } from 'react-router-dom';
import asyncComponent from './features/shared/hoc/asyncComponent/asyncComponent';
import Layout from './features/shared/hoc/Layout/Layout';
import LoginPage from './features/login-page/login';
const asyncConstruction = asyncComponent(() => {
  return import('./features/construction/construction');
});

function App(props) {
  let routes = (
    <Switch>
      <Route path='/' component={LoginPage} />
      <Route path='/view' exact component={asyncConstruction} />
      <Redirect to='/' />
    </Switch>
  );

  if (props.isAuthenticated) {
    routes = (
      <Switch>
        <Route path='/checkout' component={asyncConstruction} />
        <Route path='/orders' component={asyncConstruction} />
        <Route path='/logout' component={asyncConstruction} />
        <Route path='/auth' component={asyncConstruction} />
        <Route path='/' exact component={asyncConstruction} />
        <Redirect to='/' />
      </Switch>
    );
  }

  return (
    <div>
      <Layout renderComponent={routes} />
    </div>
  );
}

export default withRouter(App);

如您所见，我想使用 Layout.js 作为高阶组件并传递我的路由页面，以便它们在 Layout.js 的 <main> 中呈现。但是当我尝试这样做时，我得到了这个错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

我应该如何传递我的道具（这实际上是到我的高阶组件 Layout.js 的开关路由。我的目标是使用 Layout.js 作为定义的布局，其中包含页眉和页脚以及我传递的所有组件必须在Layout.js的主体中渲染

Answer 1

您可以使用childrens 这样做：

import React from "react";
import { Switch, Route, Redirect, BrowserRouter } from "react-router-dom";

function Layout({ children }) {
  return (
    <div className={"classes.Layout"}>
      <header></header>
      <main>{children}</main>
      <footer></footer>
    </div>
  );
}

const App = () => {
  const routes = (
    <BrowserRouter>
      <Switch>
        <Route path="/checkout" component={() => "hi"} />
        <Route path="/orders" component={() => "hi"} />
        <Route path="/logout" component={() => "hi"} />
        <Route path="/auth" component={() => "hi"} />
        <Route path="/" exact component={() => "hi"} />
        <Redirect to="/" />
      </Switch>
    </BrowserRouter>
  );

  return (
    <div>
      <Layout>{routes}</Layout>
    </div>
  );
};

export default App;