我有两个react组件,子组件使用GraphQL的Apollo客户端,该客户端将子组件包装为高阶组件。我想使用引用访问子类方法以在父类中执行子方法,但是当我使用ref时,我得到Graphql对象而不是react子组件。我的代码示例如下所示。
注意:
这个问题不是
的重复
React js change child component's state from parent component
或
Access child state of child from parent component in react
因为
他们不使用GraphQL Apollo Client)
父组件
import React, {Component} from 'react';
import "./Child";
class Parent extends Component{
state={
};
executeSomeChildFunction = () =>{
/* console.log(this.myChild); */
this.myChild.childFunction();
};
render(){
return(
<div>
<button onclick={this.executeSomeChildFunction}>
Click To Execute Child Function
</button>
<Child ref={el=> this.myChild =el} />
</div>
);
};
}
export default Parent;
子组件
import React, {Component} from 'react';
const myQuery = `query DriversQuery() {
drivers: {
edges{
node{
id
pk
firstName
lastName
}
}
}
}`;
class Child extends Component{
state={
};
childFunction = () => {
alert("I am a child function");
};
render(){
return(
<div>Replace this div with your code!</div>
);
};
}
export default gql(myQuery, {/*some options*/})(Child);
我得到的输出
当我console.log(this.myChild);
时,我得到了一个graphql对象。
预期产量
我想获取子元素引用。这样,当我console.log(this.myChild);
时,我应该得到子组件对象。