如何解决将组件作为道具传递
我正试图提出一个泛型函数来将特定上下文包装在每个给定页面周围。 我在我的路线部分中进行了此操作,该部分将逐页地列出状态需求。理想情况下,这只是一个辅助功能。
import React from "react";
import { BrowserRouter,Route,Switch } from "react-router-dom";
import Home from "./pages/Home";
import Analytics from "./pages/Analytics";
import { HomeProvider } from "./context/Home";
const wrapPageInContext = (Page,Context) => {
return (
<Context>
<Page />
</Context>
);
};
const ContextWrappedHome = () => {
return (
<HomeProvider>
<Home />
</HomeProvider>
);
};
export const MainRoutes = () => (
<BrowserRouter>
<Switch>
// This fails! :(
<Route
exact
path="/home"
component={wrapPageInContext(Home,HomeProvider)}
/>
// This works!!
<Route
exact
path="/home"
component={ContextWrappedHome}
/>
<Route exact path="/Analytics" component={<Analytics />
</BrowserRouter>
);
解决方法
您的wrapPageInContext
函数需要返回一个组件,如下所示:
const wrapPageInContext = (Page,Context) => () => {
return (
<Context>
<Page />
</Context>
);
};
或者更明确一点:
const wrapPageInContext = (Page,Context) => {
const Wrapper = () => (
<Context>
<Page />
</Context>
)
return Wrapper
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。