React HoC - 道具不会传递给包装的组件答案

【问题标题】：React HoC - props are not passed to wrapped componentReact HoC - 道具不会传递给包装的组件
【发布时间】：2020-08-09 19:36:38
【问题描述】：

我有两个 HoC 组件。首先必须充当一些布局包装器，其中将包含一些用于移动渲染等的逻辑。

const LayoutWrapper = (Component: React.FC<any>): React.FC<any> => {
const Layout = () => {
    const [layout, set] = React.useState("layout state");
    return <Component
        layout={layout}
    />;
}
    return Layout; 
} export default LayoutWrapper;

如果用户登录，第二个 HoC 会处理。

const Secured = (Component: React.FC<any>): React.FC<any> => {
const Wrapped = () => {
    const [securedPagestate, set] = React.useState("secured page state");
    const Layout = LayoutWrapper(Component);
    return <Layout test={securedPagestate} />
}
    return Wrapped;
}

export default Secured;

我已经包装了将呈现实际页面的主页组件，它需要从上面显示的两个 HoC 组件传递道具，但我只从 LayoutWrapper Hoc 而不是 Secured Hoc 组件获取道具。它到底有什么问题？

const HomepageView = (props: HomepageViewProps) => {
    return <>HOMEPAGE</>;
}

export default Secured(HomepageView);

【问题讨论】：

对此不是 100% 确定，但我认为您可能需要在两个 HOC 中传递剩余的道具，例如：return <Layout test={securedPagestate} {...this.props} />

标签： reactjs react-props react-hoc

【解决方案1】：

如果你想将 props 传递给你包装的组件，你必须这样做：

const Layout = (props) => {

const Wrapped = (props) => {

在 React 世界中，HOC 是函数，而不是组件，因此它们应该以小写字母开头：layoutWrapper 和 secured

【讨论】：