这是意料之中的，实际上。React 会手动调用focus()相关元素，但不会添加属性本身。

这是丹·阿布拉莫夫 (Dan Abramov)从大约 2 年前的票务回复中引用的一句话：

这是有意为之，因为它在不同浏览器中的工作方式大不相同。因此，我们没有实际设置 DOM 属性，而是在 JavaScript 中填充其行为。

另外，来自另一个线程：

如果之前没有，Chrome 会使用 autoFocus 尊重动态添加的元素。即使使用 autoFocus 创建输入，将其添加到文档中，并在下一个勾号中将其删除，也足以禁用未来在 Chrome 中添加的任何元素的自动对焦。

Firefox 根本不关心任何带有 autoFocus 的动态添加元素。

Safari 始终尊重他们。

话虽如此，您仍然可以使用autofocus="true"而不是强制该属性，autoFocus={true}但它实际上可能无法以可靠的方式工作。毕竟，React 团队对此进行 polyfill 是有原因的。

换句话说，如果你想要一个可靠、一致的跨浏览器行为 use autoFocus，如果你必须有你可以使用的 native 属性autofocus="true"，但要知道你将受让浏览器决定何时以及如何使用所述元素专注。

您可以尝试使用 ref，并在您的组件准备好时设置焦点。

const YourComponent = (props) => {
    const inputEl = useRef(null);

    useEffect(() => {
        inputEl.current.focus();
    }, []);

    return <div>
        <input autofocus="true" ref={inputEl} />
    </div>;
}

布兰登的回答完美无缺。此外，例如，如果您想自动对焦于模态上的输入，只需跟踪模态状态并使用它来对焦。例如：

const refModal = useRef(null);

useEffect(() => {
    if(modalOpen) {
        refModal.current.focus();
    }
}, [modalOpen]);