有没有办法将参考和反应组合在一起？

Question

这是用例。 我希望用户能够将ref传递给组件。 但是，我还必须在内部访问相同的 ref。

import React, { useRef, forwardRef } from 'react';
import useId from 'hooks/useId';

interface Props extends React.HTMLProps<HTMLInputElement> {
  readonly label: string;
}

export default forwardRef<HTMLInputElement, Props>(({ label, ...props }, ref) => {
  const id = useId();
  const inputRef = useRef(null);
  // ... more mechanics here
  return (
    <div>
      <label htmlFor={id}>{label}</label>
      <input {...props} id={id} ref={ref} />
    </div>
  );
});

所以这就是问题所在，我需要将该ref转发并应用于inputRef 。

我认为它会是这样的：

<input {...props} id={id} ref={compose(ref, inputRef)} />

这在反应中可行吗？

Answer 1

您只能将一个参考 object 传递给孩子，但我认为这应该不是问题。 您和使用您的组件的任何人都应该能够访问和使用相同的参考 object。

因此，您只需要检查您是否获得了 ref，如果没有则创建您自己的。 由于需要一致地调用钩子，因此您希望始终调用 useRef，然后有时只使用传入的 ref：

export default forwardRef<HTMLInputElement, Props>(({ label, ...props }, ref) => {
  const id = useId();
  const inputRef = useRef(null);
  ref = ref || inputRef;
  // ... more mechanics here, all referencing `ref`, not `inputRef`
  return (
    <div>
      <label htmlFor={id}>{label}</label>
      <input {...props} id={id} ref={ref} />
    </div>
  );
});

Answer 2

您可以使用回调 ref来获取对底层节点的引用，并设置传递的 ref 和输入 ref 的当前节点。

export default forwardRef<HTMLInputElement, Props>(
  ({ label, ...props }, ref) => {
    const id = useId();
    const inputRef = useRef(null);

    const setBothRefs = node => {
      ref = node;
      inputRef.current = node;

      console.log(`inputRef`, inputRef, `ref=>`, ref);
    };

    return (
      <div>
        <label htmlFor={id}>{label}</label>
        <input {...props} id={id} ref={setBothRefs} />
      </div>
    );
  }
);