React forwardRef - 在组件和父组件中访问 ref

Question

我需要访问组件内文本区域的引用。在组件中，它很简单：

const MyComponent = () => {
  const inputRef = useRef();

  return <textarea ref={inputRef} />
}

现在 ref 在 MyComponent 中可用，我可以将它用于一些内部逻辑。

在某些情况下，我也需要从父组件访问 ref。在那种情况下，我可以使用 forwardRef:

const MyComponent = React.forwardRef((props, ref) => {
  return <textarea ref={ref} />
})

// In some parent
const MyParent = () => {
  const inputRefFromParent = useRef();
  return <MyComponent ref={inputRefFromParent} />
}

现在我可以从父组件访问 textarea 的 ref，并将其用于父组件内的逻辑。

我发现自己处于需要对 MyComponent 中的 ref 执行一些内部逻辑的情况，但我可能还需要从 MyParent 获取该 ref。我该怎么做？

Answer 1

您可以在 MyComponent 中保留一个 ref，并使用从 MyParent.

像下面这样尝试。它将文本区域中的焦点方法公开给父级。您可以通过访问 textAreaRef.

来执行任何其他内部操作

import { useRef, forwardRef, useImperativeHandle } from "react";

const MyComponent = forwardRef((props, ref) => {
  const textAreaRef = useRef();

  // all the functions or values you can expose here
  useImperativeHandle(ref, () => ({
    focus: () => {
      textAreaRef.current.focus();
    }
  }));

  const internalFunction = () => {
    // access textAreaRef
  };

  return <textarea ref={textAreaRef} />;
});

// In some parent
const MyParent = () => {
  const inputRefFromParent = useRef();

  // you can call inputRefFromParent.current.focus(); in this compoenent
  return <MyComponent ref={inputRefFromParent} />;
};

Answer 2

除了 Amila 的回答之外，我还找到了另一种方法，使用 ref callback:

const MyComponent = React.forwardRef((props, parentRef) => {
  const localRef = useRef();
  return <textarea ref={ref => {
    parentRef.current = ref;
    localRef.current = ref;
  }} />
})

因此回调 ref 对 textarea 的 ref 进行更细粒度的控制，并简单地将其值分配给本地 ref 和父 ref。

React forwardRef - 在组件和父组件中访问 ref

React forwardRef - access ref within component, and in parent

javascript

reactjs

react-forwardref