React 访问另一个组件的 DOM 节点

Question

在阅读react.dev学习教程时，我注意到访问另一个组件的DOM节点不太正确。

https://react.dev/learn/manipulate-the-dom-with-refs#accessing-another-components-dom-nodes

如上述网址所述

但是，如果您尝试在自己的组件上放置引用（如 < MyInput />），默认情况下您将得到 null。这是一个演示它的例子。请注意单击按钮不会使输入聚焦：

如果我在沙箱中运行示例，则不会出现有关功能组件无法给出引用的警告。

代码运行正常，输入获得焦点。

我什至下载了沙箱并在本地开发环境中运行它，但得到了相同的结果。

我的猜测是 ref 属性被视为普通 prop，被发送到 MyInput 组件并被解构并成为 < input > 的 ref 属性。

和下面的代码是一样的

import { useRef } from "react";

function MyInput({myCustomRef}) {
  return (
    <>
      <label>Name:</label>
      <input ref={myCustomRef} />
    </>
  );
}

export default function MyForm() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <MyInput myCustomRef={inputRef} />
      <button onClick={handleClick}>Focus the input</button>
    </>
  );
}

但如果是这样，那就意味着教程是错误的，考虑到教程其余部分的高质量，这是出乎意料的。

Answer 1

这是因为沙箱现在运行的是 React 19，不再需要forwardRef，并且现在可以使用

ref

属性:

新的功能组件将不再需要forwardRef，我们将发布一个codemod来自动更新您的组件以使用新的ref属性。在未来的版本中，我们将弃用并删除forwardRef。

因此，React 文档的这一部分似乎尚未更新以反映新的行为。