如何在React，TypeScript和Redux中从父组件子函数调用

Question

I have child component:

import * as React from "react";
import {Component} from "react";
import {connect} from "react-redux";

class Child extends Component<any, any> {

    childFunction = () => {
        console.log('childFunction');
    };

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

export default connect<any, any>(
    null,
    null
)(Child);


and parent component:

import * as React from "react";
import {Component, MouseEvent} from "react";
import {connect} from "react-redux";
import Child from "./Child";

class Parent extends Component<any, any> {

    parentFunction = (e: MouseEvent<HTMLElement>) => {
        console.log("parent");
        //TODO : call child function?
    };

    render() {

        let child = <Child />;

        return <div>
            {child}
            <button onClick={(e) => this.parentFunction(e)}>Call child function from parent</button>

        </div>
    }
}

export default connect<any, any>(
    null,
    null,
    null,
    {forwardRef: true}
)(Parent);

The question is: how to call Child.childFunction() when click on button, which is in Parent component?

I have tried to create reference on Child: React.createRef<Ref<Child>>(); , but get error: Error:(13, 39) TS2749: 'Child' refers to a value, but is being used as a type here.

The reason is: connect function in Child component.

Answer 1

Assuming that the function in your parent component called parentFunction

And in your render method of the parent component, give the property parentFunction to the child component, which will be refering to the parent component's function like this.parentFunction .

render(){
  return (
    <ChildComponent parentFunction={this.parentFunction} />
  )
}

Inside your child component, on the function that handles the button click, you will be able to access and invoke the function parentFunction which is sent from the parent as follows:

supposing that childFunction is the function you handle the button click with:

childFunction = (e) => { //don't forget to include the event to your onclick event handler
  console.log('childFunction');
  this.props.parentFunction(e); //the function invoked after being passed from parent component as a prop.
};

To read more about this, Passing Data Between React Component .