Question

PRESENTATIONAL COMPONENT
class ClientsPage extends React.Component {

_myFunction() {
//do what needs to be done
}

render() {
return <div></div>
}
}
export default doMagic(ClientsPage)



HOC COMPONENT
export const doMagic= (WrappedComponent) => {
    return class MyMagic extends React.Component {
        render() {
            const props = Object.assign({}, this.props , {
                xxx: ???,
            });

            return <WrappedComponent { ...props } />
        }
    };
}

大家好，我有反应组件，想要在我的HOC组件中以某种方式对其进行转换。但这是问题所在。我想创建另一个道具让我们在HOC中称它为xxx。这个prop将是object类型，这个对象的一个属性应该是包装组件的功能，所以像

那样

xxx：{callback：对包装组件中的函数的引用}

这甚至可能吗？

事先提前

Answer 1

您可以使用WrappedComponent.prototype._myFunction（）

回调包装组件的功能

{{1}}

您可以在此处查看工作jsfiddle https://jsfiddle.net/12ojjddw/

Answer 2

如果要访问WrappedCompoent道具，则需要使用继承反转，这有点复杂，但是可以完全控制，这里是一个很好的解释：

https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e

React HOC - 访问包装组件函数

2 个答案: