使用React.Children从外部调用内部组件方法

Question

I've created a validation function that I can call externally like so:

const isValid = validateChildren(this.props.children)

And I have a component I'd like to validate.

class MyComponent extends React.Component {
 constructor(props) {
  super(props)
 } 

 isValid() {
  // Validation will check against the render method in this component.
  return true;
 }

 render() {
  return false;
 }

}

Within that function I'm using the component props to check for a validation function using React.Children . This looks something like this:

React.Children.map(children, (child) => {
 // Validation here.
});

What I'd like to do in addition to checking for props, is to check for a internal class method of isValid and then fire it. That way in the case of MyComponent I could do the following:

if (child.current.isValid) child.current.isValid()

Is something like this possible in React? I'm trying to solve a performance issue with cloning the child elements that I'd like to avoid with this approach.

Answer 1

You can do this using forwardRef and the useImperativeHandle hook, as described here .

If you change the name in the App function, you'll see the validity change.

import React, { useState, useImperativeHandle, useRef, useEffect } from "react";
import ReactDOM from "react-dom";

const validateNameProp = nameProp => {
  return nameProp === "Colin";
};

let Child = ({ name, childRef }) => {
  const [nameIsValid, setNameIsValid] = useState(false);

  // We want to expose the isValid function so it can be called by parent.
  useImperativeHandle(childRef, () => ({
    isValid
  }));

  const isValid = () => {
    setNameIsValid(true);
  };

  return (
    <div ref={childRef}>
      <h1>
        Name is {name} and this name is: {nameIsValid ? "valid" : "invalid"}
      </h1>
    </div>
  );
};

const App = () => {
  const childRef = useRef();
  const name = "Colin";

  // Wait until component mounts so ref is not null.
  useEffect(() => {
    if (validateNameProp(name)) {
      childRef.current.isValid();
    }
  }, []);

  return <Child childRef={childRef} name={name} />;
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);