Невозможно вызвать дочерний метод, используя ссылку с подключением

Question

Я хотел бы вызвать метод из дочернего компонента, как предлагается здесь Вызвать дочерний метод из родительского

Тем не менее, он не работает, когда дочерний компонент обернут с помощью connect из response-redux, как в примере ниже:

дочерний компонент

interface OwnProps {
  style?: any;
}
interface ReduxStateProps {
  category: string;
}
interface DispatchProps {
  updateTimestamp: (timestamp: Date) => void;
}
type Props = ReduxStateProps & DispatchProps & OwnProps;

interface State {
  timestamp?: Date;
}

class ChildComponent extends React.Component<Props, State> {
  childMethod = () => {
    console.log("I am the child");
  };

  render(){
      <Text>Debug</Text>
  }
}

function mapStateToProps(state: any): ReduxStateProps {
  return {
    category: state.menu.category
  };
}

function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
  return {
    updateTimestamp: (timestamp: Date) =>
      dispatch(updateTimestampActionCreator(timestamp))
  };
}

export default connect<ReduxStateProps, DispatchProps, OwnProps>(
  mapStateToProps,
  mapDispatchToProps
)(ChildComponent);

Родительский компонент

class ParentComponent extends React.Component<{},{}> {
  private childComponent: any;

  render(){
    <View>
      <ChildComponent ref={ref => this.childComponent = ref as any}>
    </View>
  }
}

Здесь метод childMethod не определен при использовании ссылки в родительском компоненте. Без использования connect все работает нормально.

Answer 1

Делать это обычно называют плохой практикой. Другой вариант, который обычно является гораздо лучшим подходом, заключается в следующем:

class Parent extends React.Component {

   state = {
       functionToCallInChild = null;
   }

   render() {
       return (
           <Child setCallable={callable => this.setState({functionToCallInChild: callable})}/>
       );
   }
}

class Child extends React.Component {

    componentDidMount() {
       this.props.setCallable(this.childFunction);
    }

    childFunction = () => console.log("It worked!");

    render() {
       return (</div>);
    }
}

Вы можете видеть, что после рендеринга дочернего элемента родительский элемент теперь имеет доступ к вызову дочерней функции.