React - 如何将“ref”从子组件传递到父组件

JS

在React中，可以通过使用ref来获取对组件的引用。默认情况下，ref只能在组件的直接子组件中进行访问。然而，有时候我们可能需要将ref从子组件传递到父组件中。本文将介绍如何实现这种传递，并提供一个简单的示例代码来说明这个过程。

首先，让我们来看一个简单的示例，展示了父组件如何通过ref访问子组件中的方法或属性。

JSx
import React, { useRef } from "react";
const ChildComponent = () => {
  const childRef = useRef();
  const handleClick = () => {
    console.log("Child Component Clicked");
  };
  return (
    <div ref={childRef}>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
};
const ParentComponent = () => {
  const childRef = useRef();
  const handleButtonClick = () => {
    childRef.current.handleClick();
  };
  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleButtonClick}>Call Child Component Method</button>
    </div>
  );
};
export default ParentComponent;

在上面的示例中，我们有一个父组件ParentComponent和一个子组件ChildComponent。在子组件中，我们使用useRef来创建一个childRef引用，并在div元素上使用ref={childRef}将其绑定。

子组件中还有一个handleClick方法，它将在按钮被点击时被调用。当点击按钮时，它将在控制台中打印出一条消息。

在父组件中，我们也使用useRef来创建一个childRef引用，并将其传递给子组件的ref属性。父组件中还有一个handleButtonClick方法，在按钮被点击时被调用。这个方法通过childRef.current来访问子组件中的方法，并调用handleClick方法。

现在，当我们在父组件中点击按钮时，控制台将显示出"Child Component Clicked"的消息，这是因为父组件通过ref成功地访问了子组件中的方法。

将Ref从子组件传递到父组件

有时候，我们可能需要将子组件中的ref传递到父组件中，以便在父组件中使用子组件的ref。为了实现这个，我们可以使用forwardRef函数。

JSx
import React, { useRef, forwardRef, useImperativeHandle } from "react";
const ChildComponent = forwardRef((props, ref) => {
  const childRef = useRef();
  useImperativeHandle(ref, () => ({
    handleClick: () => {
      childRef.current.click();
    }
  }));
  return (
    <div>
      <button ref={childRef}>Click Me</button>
    </div>
  );
});
const ParentComponent = () => {
  const childRef = useRef();
  const handleButtonClick = () => {
    childRef.current.handleClick();
  };
  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleButtonClick}>Call Child Component Method</button>
    </div>
  );
};
export default ParentComponent;

在上面的示例中，我们使用forwardRef函数来创建一个包装了ChildComponent的新组件。这个函数接收一个函数作为参数，该函数接收props和ref作为参数。在函数内部，我们创建了一个childRef引用，并使用useImperativeHandle钩子来定义了一个将在父组件中可用的handleClick方法。

在子组件的返回中，我们将button元素的ref设置为childRef。

在父组件中，我们使用useRef来创建一个childRef引用，并将其传递给ChildComponent的ref属性。我们还有一个handleButtonClick方法，它在点击按钮时被调用。这个方法通过childRef.current来访问子组件中的方法，并调用handleClick方法。

现在，当我们在父组件中点击按钮时，子组件中的按钮也会被点击。这是因为我们成功地将子组件中的ref传递到了父组件中，并在父组件中使用了子组件的方法。

在React中，我们可以使用ref来获取对组件的引用。通过ref，我们可以访问组件的方法或属性。有时候，我们可能需要将ref从子组件传递到父组件中。为此，我们可以使用forwardRef函数来创建一个新的组件，并在其中定义一个将在父组件中可用的方法。通过这种方式，我们可以实现将ref从子组件传递到父组件的目的。

上述示例代码提供了一个简单的演示，展示了如何将ref从子组件传递到父组件。希望本文能够帮助你理解如何在React中实现这个功能。