添加 Tooltip to Input 导致 `findDOMNode is deprecated in StrictMode` 错误 - Ant Design

Question

我想向输入字段添加工具提示。为此，我将输入字段包装在工具提示中，并按预期显示。然而，当我将鼠标悬停在它上面时，它会打印一条警告。

Tooltip/Input

<Tooltip title="Title">
  <Input />
</Tooltip>

警告

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Input which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
span
ClearableLabeledInput@http://localhost:3000/static/js/bundle.js:15995:90
Input@http://localhost:3000/static/js/bundle.js:16374:90
Trigger@http://localhost:3000/static/js/bundle.js:59906:92
Tooltip@http://localhost:3000/static/js/bundle.js:58900:26
./node_modules/antd/es/tooltip/index.js/Tooltip<@http://localhost:3000/static/js/bundle.js:20652:62

我可以通过删除 <React.StrictMode> 来隐藏错误，但我想修复此错误。

这是 Ant Design 中的错误还是我添加的 Tooltip 不正确？

Answer 1

这似乎是 Ant Design 组件的问题。例如，使用普通 DOM <input> 不会导致此错误。

话虽如此，解决方法是简单地将 Ant 的 <Input> 包装在普通的 DOM 元素中，例如 <div> 解决它：

    <Tooltip title="prompt text">
      <div>
        <Input />
      </div>
    </Tooltip>

您可以在此 sandbox

中看到一个工作示例

添加 Tooltip to Input 导致 `findDOMNode is deprecated in StrictMode` 错误 - Ant Design

Adding Tooltip to Input causes `findDOMNode is deprecated in StrictMode` error - Ant Design

javascript

reactjs

antd