使用Apollo Client GraphQL时如何在父组件中获取React Js子组件引用

时间:2018-08-18 05:51:35

标签: javascript reactjs graphql react-apollo apollo-client

我有两个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对象。
Output

预期产量
我想获取子元素引用。这样,当我console.log(this.myChild);时,我应该得到子组件对象。

0 个答案:

没有答案