Reactjs 如何通过HOC传递父道具并将其正常使用

Reactjs 如何通过HOC传递父道具并将其正常使用,reactjs,react-props,higher-order-components,Reactjs,React Props,Higher Order Components,我学了很多,但有一件事我不懂 我有一个类似这样的问题: const MyHoc = WrapperComponent => { class TheHoc extends React.Component { constructor(props) { super(props); this.someMethod = this.someMethod.bind(this); } someMeth

我学了很多,但有一件事我不懂

我有一个类似这样的问题:

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

我已经试过了,这对我来说很好,你可以看到这里的工作示例


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

试试这个

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

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

export default MyHoc;
您可以检查我的HOC示例connect是否为HOC。

试试这个

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

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

export default MyHoc;

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

您在哪里定义了
close()
函数?我看不到您在hoc类中定义它。请在导入和引用
导出默认MyHoc(HocUser)
的地方添加更多代码。应该将
close
传递给该组件的道具。我再次更新了更多类似
的代码,
close
是从
CollapseMenu
的道具接收的。您需要更新更多的代码,其中
CollapseMenu
是实例,并将
close
传递给它的道具。您在哪里定义了
close()
函数?我看不到您在hoc类中定义它。请在导入和引用
导出默认MyHoc(HocUser)
的地方添加更多代码。应该将
close
传递给该组件的道具。我再次更新了更多类似
的代码,
close
是从
CollapseMenu
的道具接收的。您需要更新更多的代码,其中
CollapseMenu
是实例,并将
close
传递给它的道具。谢谢,正如您所说的
if(close)close()谢谢,我刚才没听到你说的
if(close)close()
const onClickMe = () => {
    if(close) close();
    doStuff();
};