ReactJS: How to get a functional parent component to call a function in a child class component-CodePudding

I have come across discussions of how to get a parent class component to call a child class component and a few instances of other mixes but have yet to find a working example of calling a function in a class child component from a functional parent component. Code for instance:

function ParentForm(props) {
  const parentDoSomething = () => {
       // Want to call child component function childDoSomething() somewhere in here.
 }
...
return (
   ... various visual elements, buttons, etc. ...
<ChildComponent />
...
);

// ----------------------------------

class ChildComponent extends React.Component {
...
childDoSomething = () => {
   ... does something ...
}

You'd think there'd be an easy straightforward way to do this but it is eluding me. Can anyone give me good working examples of this solution? Thanks in advance as always.

CodePudding user response：

It is not a normal pattern to have a parent component manually executing code that's inside a child component. You should default to using a more standard approach: pass down props to the child, and have the child check those props and act accordingly. This could include the child component calling a function inside itself when it receives a certain prop.

But if you absolutely need to do this, then you will need to get a ref to the child component. Since your child component is a class component, this works out of the box:

function ParentForm(props) {
  const ref = useRef();
  const parentDoSomething = () => {
    ref.current.childDoSomething();
  }

  return (
    ...
    <ChildComponent ref={ref} />
  )
}

If the child is a function component it is more difficult, because you will have to construct an object that you want the ref to refer to, and then tell react about that object via forwardRef and useImperativeHandle:

const ChildComponent = React.forwardRef((props, ref) => {
  const childDoSomething = () => {

  }

  useImperativeHandle(ref, () => ({
    childDoSomething
  }));

  // ...
});

CodePudding user response：

You can pass a ref as a param to ChildComponent and access it like this.ref instead of accessing like a prop this.props.ref. There you can bind functions to it.

class ChildComponent extends React.Component {
  componentDidMount() {
    this.ref = { current: { childDoSomething: this.childDoSomething } };
  }

  childDoSomething = () => {
    alert("Hello from child component");
  };

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

function ParentForm(props) {
  const ref = React.useRef();

  const parentDoSomething = () => {
    if (ref.current) {
      ref.current.childDoSomething();
    }
  };

  return (
    <div>
      <button onClick={parentDoSomething}>Call child function</button>
      <ChildComponent ref={ref} />
    </div>
  );
}