Question

我想使用渲染道具（real example）访问在两个外部组件之间传递的ref。能做到吗？

function Component() {
  // how to get access to `ref` here?

  return (
    <A>
      {({ref}) => (
        <B ref={ref}/>
      )}
    </A>
  )
}

Answer 1

您可能需要 React.forwardRef

引用转发是一种通过组件自动将引用传递到其子元素的技术。

这对于应用程序中的大多数组件通常不是必需的。但是，它对于某些类型的组件很有用，尤其是在可重用的组件库中。

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

Answer 2

弄清楚了。 ref渲染道具实际上是不好称的，它不是ref而是用于设置ref的函数，因此我们只能使用内联函数（这可能会导致额外的渲染）：

function Component() {
  const bRef = useRef(null);

  return (
    <A>
      {({ref: setRef}) => (
        <B ref={ref => {
          bRef.current = ref;
          setRef(ref);
        }}/>
      )}
    </A>
  )
}

反应：通过渲染道具在组件之间传递访问引用

2 个答案: