javascript - 将 ref 作为属性传递和将其作为 prop 传递有什么区别？

Question

React.forwardRef 创建一个 React 组件，该组件将它接收到的 ref 属性转发给树中下方的另一个组件

import { forwardRef, useRef } from "react";
import "./styles.css";

export default function App() {
  return <Parent />;
}

function Parent() {
  const ref = useRef();
  const onClick = () => {
    ref.current.focus();
  };
  return (
    <>
      <Child ref={ref} />
      <button onClick={onClick}>click me</button>
    </>
  );
}

const Child = forwardRef((props, ref) => {
  return <input ref={ref} type="text" />;
});

但是，我发现我也可以通过这种方式实现:

import { forwardRef, useRef } from "react";
import "./styles.css";

export default function App() {
  return <Parent />;
}

function Parent() {
  const ref = useRef();
  const onClick = () => {
    ref.current.focus();
  };
  return (
    <>
      <Child myRef={ref} /> // pass the ref through props
      <button onClick={onClick}>click me</button>
    </>
  );
}

const Child = ({ myRef }) => {
  return <input ref={myRef} type="text" />;
};

这里是代码沙盒链接:https://codesandbox.io/s/jolly-elbakyan-gugmyv?file=/src/App.js

我想知道这两种实现之间的区别是什么，是否意味着不再需要forwardRef？

Answer 1

是的，你绝对可以做到，它工作得很好。如果您需要对子组件中的元素进行多个引用，或者如果您想给它们指定特定的名称以便清楚它们将引用什么，这将是一种特别有用的技术 - 例如inputRef和 submitBtnRef .然而it is generally discouraged因为它被认为会破坏封装。

forwardRef的优势是可以使用标准 ref “ Prop ”，好像 referencing a DOM element或 a class component instance .它确实允许组件作者使用函数组件语法，但仍然公开 ref . ref的目的无需阅读大量组件文档，JSX 元素中的内容就很清楚:它公开了一个句柄，可以与组件进行命令式交互。使用名称 ref还有助于重构 <input ref={myRef}>至 <CustomInput ref={myRef}> .