如果我们可以简单地在 props 中传递创建的 ref，为啥还需要 React forwardRef？ [复制]

Posted 2023-02-19

【中文标题】如果我们可以简单地在 props 中传递创建的 ref，为啥还需要 React forwardRef？ [复制]

【英文标题】：why do we need React forwardRef if we can simple pass the created ref in props? [duplicate]如果我们可以简单地在 props 中传递创建的 ref，为什么还需要 React forwardRef？ [复制]

【发布时间】：2022-01-06 00:47:56

【问题描述】：

根据 react 文档将 refs 传递给子组件的正确方法是这样的：

import React from 'react';

const Input = React.forwardRef((props, ref) => 
  React.useEffect(() => 
    ref.current.focus();
  , []);
  return <input type="text" ref=ref />;
);

export default function App() 
  const inputRef = React.createRef();
  return (
    <div>
      <Input ref=inputRef />
    </div>
  );

但是，如果我尝试将创建的 ref 作为普通道具以任何其他名称传递，然后是“ref”，这也可以按预期工作。

import React from 'react';

const Input = (props) => 
  React.useEffect(() => 
    props.inputRef.current.focus();
  , []);
  return <input type="text" ref=props.inputRef />;
;

export default function App() 
  const inputRef = React.createRef();
  return (
    <div>
      <Input inputRef=inputRef />
    </div>
  );

所以问题是，forwardRef 是否做了一些我们用普通道具无法实现的特殊功能？

【问题讨论】：

你的例子都错了，需要使用useRef，搜索createRef vs useRef。其余的在 dup 答案中解释

【参考方案1】：

不用forwardRef，按照官方documentation.

引用转发是一种通过组件自动将引用传递给它的一个子组件的技术。对于应用程序中的大多数组件，这通常不是必需的。但是，它对某些类型的组件很有用，尤其是在可重用的组件库中。最常见的场景如下所述。

您可以通过将ref 与另一个道具名称（如divRef）一起传递来做类似的事情。但是如果你将 ref 作为ref prop 传递，那么React will not allow that 和 不会将 ref 与 DOM 元素关联 并会显示警告

如果你想让你的元素像其他元素一样自然并引用它们 ref 使用ref prop 关键字，则必须forwardRef，否则不是。