Javascript React HOC-访问包装组件函数 PRESENTATIONAL组件 类ClientsPage扩展了React.Component{ _myFunction（）{ //做需要做的事 } render（）{ 返回 } } 导出默认域（ClientsPage） HOC组件 导出常量doMagic=（WrappedComponent）=>{ 返回类MyMagic扩展了React.Component{ render（）{ const props=Object.assign（{}，this.props{ xxx:？？？， }); 返回 } }; }

大家好，我有一个react组件，希望在我的HOC组件中以某种方式对其进行转换。 但问题是。我想创建另一个道具，让我们在HOC中称之为xxx。这个道具将是object类型，并且这个对象的属性之一应该是来自包装组件的函数，所以类似于womething

xxx:{callback:从包装组件引用函数}

这可能吗

---

thx提前

您可以使用WrappedComponent.prototype回调已包装组件的函数

constdomagic=（WrappedComponent）=>{
返回类MyMagic扩展了React.Component{
render（）{
const props=Object.assign（{}，this.props{
xxx:WrappedComponent.prototype.\u myFunction（）
});
返回
}
};
}
类ClientsPage扩展了React.Component{
_myFunction（）{
返回“包装组件函数回调完成…”；
}
render（）{
返回Hello{this.props.xxx}
}
}
导出默认域（ClientsPage）

---

您可以在这里看到正在工作的JSFIDLE

如果您想访问WrappedComponent道具，那么您需要使用继承反转，它有点复杂，但允许您完全控制，下面是一个很好的解释：

---

您的用例是什么？使用这种方法，您可以让HOC意识到包装组件中存在的函数，从而在两者之间创建紧密耦合，这会破坏创建HOC的目的，并使您的coode容易出错。一定有比这更好的方法，去做你想做的事情。我假设你想要艾鲁马莱在他的回答中所建议的。它肯定会工作，但对我来说没有任何意义。我的使用案例是这个im使用第三方表组件，它接受某种格式的数据，例如id、值、clickCallback的单元格数组。所以在包含此表的每个组件中（基本上是我应用程序中的每个页面）我正在用提到的HOC包装我的自定义组件并添加clickCallback，因为每次我仍然不确定它的实现都是不同的，但是艾露马莱的答案是你想要的吗？我是说，是的，它是有效的…但是现在在@AbhishekJain评论之后，我不确定这是正确的方法：）可以从_myFunction（）访问道具/状态吗？你是说ClientsPage的状态/道具吗？是的，举个例子…我想我不能这样做，因为道具只有在组件实例化时才被传递…有办法解决这个问题吗？我可以认为_myFunction是高阶函数，接受道具并返回另一个函数，但这真的很糟糕，我们无法访问HOC中包装组件的状态/道具。你试过react redux吗？您可以将状态作为道具从外部连接到组件，该组件是在_myFunction中执行的操作。希望这对你有帮助。。！否则我会帮你解决这个问题。

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 } />
        }
    };
}

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

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

class ClientsPage extends React.Component {

        _myFunction() {
            return "Wrapped Component Function Callback Done..!";
        }

        render() {
            return <div>Hello {this.props.xxx}</div>
        }
}

export default doMagic(ClientsPage)