React中，加入到缓存路由的组件，缓存恢复时如何调用子元素的方法？

Question

React项目中，组件Parent被加入到缓存路由'/parent'，Parent中包含有子组件Child，Child组件里可以进入到'/child-info'路由。

路由从'/parent'进入到'/child-info'，此时返回上一页，Parent被缓存恢复时，调用$Child.childFunc()报错，提示$Child为undefined。

---

Parent：

import React from 'react';
import Child from './components/child';

class Parent extends React.Component {
    constructor(props) {
        super(props);
        props.cacheLifecycles.didRecover(this.componentDidRecover);
    }
    // 组件被缓存恢复时
    componentDidRecover() {
        // 调用子组件的方法
        console.log('组件已被恢复');
        this.$Child.childFunc();
    }
    render() {
        return (
            <Child  onRef={node => this.$Child = node} />
        )
    }
}

Child:

import React from 'react';
import {withRouter} from "react-router-dom";

class Child extends React.Component {
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        this.props.onRef && this.props.onRef(this);   // 挂载子元素
    }
    // 父元素内调用的子元素方法
    childFunc = () => {
        console.log("子元素的方法被调用")
    }
    // 前往child-info页面
    toInfo = () => {
        const {history} = this.props;
        history.push({
            pathname: '/child-info'
        })
    }
    render() {
        return (
            <div>
                <ul>
                    <li onClick={this.toInfo}>child1 info</li>
                </li>
            </div>
        )
    }
}

猜想问题应该出现在Parent组件被恢复时，Child组件未被恢复？
该问题如何解决？

Answer 1

问题已解决，昏了头了，Parent中调用子组件方法时的this指向错误，将componentDidRecover改写为箭头函数即解决，踩自己一下

componentDidRecover = () => {
    // 调用子组件的方法
    console.log('组件已被恢复');
    this.$Child.childFunc();
}