Question

我学习了 React HOC 并且无法理解一件事，

我有一个这样的 HOC：

const MyHoc = WrapperComponent => {
    class TheHoc extends React.Component {
        constructor(props) {
            super(props);
            this.someMethod = this.someMethod.bind(this);
        }

        someMethod = () => {
            // ...do stuf
        };

        render() {
            return <WrapperComponent doStuff={this.someMethod} {...this.props} />;
        }
    }
    return TheHoc;
};

export default MyHoc;

当我像这样使用它时：

function HocUser(props) {
    const { close, doStuff } = props;

    const onClickMe = () => {
        close();
        doStuff();
    };

    return (
        <div>
            <MenuLinksSpace />
            <MenuLinks>
            <li>
                    <a onClick={onClickMe} role="presentation">
                        <span className="icon is-medium">
                            <i className="fas fa-user" />
                        </span>{' '}
                        Click me
                    </a>
                </li>
            </MenuLinks>
        </div>
    );
}

export default MyHoc(HocUser);

我的问题是 close 现在未定义并且在它应该是从 HocUser 的父级传递的函数时出错。

由于 close 道具丢失，我的 HOC 出了问题

请指教？

更新

这是使用 HocUser 的组件：像这样 <HocUser close={close} />

import React, { useRef, useCallback, useEffect } from 'react';
import styled from 'styled-components';
import { useSpring, animated } from 'react-spring';
import useOnClickOutside from './UseOnClickOutside';
import NavLinkPage from './NavLinkPage';
import HocUser from './HocUser';

const CollapseMenu = props => {
    const { show, close } = props;
    const { open } = useSpring({ open: show ? 0 : 1 });

    const reference = useRef();
    useOnClickOutside(reference, close, 'burgerMenu');

    const escFunction = useCallback(
        event => {
            // only accept 27 if it's visible
            if (event.keyCode === 27 && show === true) {
                close();
            }
        },
        [close, show],
    );

    useEffect(() => {
        document.addEventListener('keydown', escFunction, false);
        return () => {
            document.removeEventListener('keydown', escFunction, false);
        };
    }, [escFunction]);

    if (show === true) {
        return (
            <CollapseWrapper
                ref={reference}
                style={{
                    transform: open
                        .interpolate({
                            range: [0, 0.2, 0.3, 1],
                            output: [0, -20, 0, -200],
                        })
                        .interpolate(openValue => `translate3d(0, ${openValue}px, 0`),
                }}
            >
                <NavLinkPage />
                <HocUser close={close} />
            </CollapseWrapper>
        );
    }
    return null;
};

export default CollapseMenu;

const CollapseWrapper = styled(animated.div)`
    position: fixed;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    z-index: 100;
`;

Answer 1

我已经试过了，这对我来说很好用，你可以在这里看到工作示例...

https://stackblitz.com/edit/react-sghmqc?file=src%2FHOC.jsx

Answer 2

试试这个

const MyHoc = WrapperComponent => {
    const someMethod = () => {
        // ...do stuf
    };

    return (props) => {
        return <WrapperComponent doStuff={someMethod} {...props} />;
    };
};

export default MyHoc;

在 HocUser 内部检查 close 是否存在，然后调用 close 函数。如果关闭不是从父级传递的，你也应该处理这种情况。

const onClickMe = () => {
    if(close) close();
    doStuff();
};

您可以查看我的 HOC 示例 here connect 是 HOC。

如何通过 HOC 传递父道具并正常使用它

2 个答案: