Question

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

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);

Answer 1

如果要将道具传递给包裹的组件，则必须采用以下方式：

const Layout = (props) => {

const Wrapped = (props) => {

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

React HoC-道具不传递给包装组件

1 个答案: