我在我的项目中使用React和Apollo。
我在组件MenuModal
中得到了这个
onClick = () => {
console.log(this.child)
this.child.onSubmit(); // do stuff
};
render() {
return (
<Modal.Content scrolling>
<MenuEdit
ref={ref => (this.child = ref)} // Using ref to access it's properties
selectedValues={selectedValues}
match={match}
menu={menu}
/>
我的组件MenuEdit
具有在类中定义的功能:
onSubmit = values => {
console.log('calling inner form submit', values);
if (this.child) {
this.child.submitFromOutside();
}
};
我应该可以从onSubmit
打电话给MenuModal
吧?
当我在this.child
函数中使用console.log onClick
时,我可以看到:
因此,这里没有onSubmit
函数。看到GraphQL
时,我想知道是否与使用graphQL HOC导出组件有关。
export default compose(
graphql(UPDATE_MENU, { name: 'updateMenu' }),
withApollo,
withRouter
)(MenuEdit);
当我将其更改为:
export default MenuEdit;
所以我想知道如何编写导出文件,以便仍然可以在孩子中访问函数。谢谢。
答案 0 :(得分:0)
HOC将您的组件包装到另一个组件中。您可以在React devtools中看到它。您将看到该组件在包裹的组件周围呈现了一个组件。像这样
<Apollo(ChildComponent)>
<ChildComponent />
</Apollo>
您的引用然后指向Apollo(ChildComponen)
元素实例。
您在这里所做的事情对我来说似乎是一种反模式。在React中,我们通常不对渲染的元素(有时是DOM元素)调用函数。这个想法更确切地说是,孩子通过将其作为属性来接受父母的职能。在您的情况下,最好的办法是摆脱引用,并在组件链中向上移动状态和动作。或者,您可以在react-apollo
中使用新的render prop style。
答案 1 :(得分:0)
Apollo存储库为解决此问题做出了贡献... https://github.com/apollographql/react-apollo/pull/410
像这样withApollo(Component, { withRef: true })
包装组件导出将公开您的子方法。可通过ref.current.wrappedInstance
访问。