React访问其他组件DOM节点

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

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

如上述URL所述

但是,如果您试图在自己的组件上放置一个ref,例如<MyInput/>;,默认情况下,您将得到null。这里有一个示例来演示它。请注意,单击按钮不会聚焦输入:

如果我在沙箱中运行该示例,则不会出现关于无法为函数组件提供引用的警告。

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

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

我猜测ref属性被视为一个普通的道具,它被发送到MyInput组件并被销毁,成为<输入>。

它与以下代码相同

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>
    </>
  );
}

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