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

Question

我创建了一个验证函数，可以像这样从外部调用

const isValid = validateChildren(this.props.children)

我有一个要验证的组件。

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;
 }

}

在该函数中，我正在使用组件道具来使用React.Children检查验证功能。看起来像这样：

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

除了检查道具外，我还想检查isValid的内部类方法，然后将其触发。在MyComponent的情况下，我可以执行以下操作：

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

在React中有可能这样的事情吗？我正在尝试通过克隆希望通过这种方法避免使用的子元素来解决性能问题。

Answer 1

您可以使用forwardRef和useImperativeHandle钩子来完成此操作，如here所述。

如果您在App函数中更改名称，则会看到有效性更改。

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);