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传递的ref使用useImperativeHandle挂钩在父组件中公开您需要的内容。

像下面这样尝试。 它将文本区域中的焦点方法公开给父级。 您可以通过访问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 回调：

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

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

Answer 3

您还可以执行以下操作：

const MyComponent = React.forwardRef((props, externalRef) => {
    const internalRef = useRef<HTMLElement>();
    const ref = useMemo(
        () => externalRef || internalRef,
        [externalRef, internalRef]
    ) as React.MutableRefObject<HTMLElement>;
    
    return <textarea ref={ref} />
})