将工具提示添加到输入框导致“在StrictMode中已弃用findDOMNode”错误- Ant Design。

Question

我想要给一个输入框添加工具提示。为此，我将输入框包裹在工具提示中，它可以按预期显示。但是当我悬停在上面时，它会打印一个警告。

工具提示/输入框

<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 的 bug 还是我添加 Tooltip 的方法不正确？

- Michael

Answer 1

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

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

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

您可以在这个沙盒中看到一个工作示例。

- tromgy

---

这就是了，谢谢！我会为此创建一个问题。 - Michael

这个答案真的是救命稻草啊。没有任何 Ant Design 的问题可以解决它。 - ajin