react-quill 报错 Warning: findDOMNode
时间: 2024-09-14 10:12:48 浏览: 15
React-quill 是一个为 React 应用提供的富文本编辑器组件,它基于流行的 Quill 编辑器。当在使用 react-quill 时遇到 "Warning: findDOMNode is deprecated in StrictMode" 的警告,这通常是因为在 React 的严格模式(StrictMode)下直接使用了 `findDOMNode` 方法。
`findDOMNode` 是一个用于获取组件实例对应的真实 DOM 节点的方法,但在 React 的严格模式中,鼓励开发者使用其他替代方法,因为 `findDOMNode` 不能保证返回值的一致性,而且它与函数组件和未来的 React 版本不兼容。
要解决这个问题,你可以:
1. 确保你没有直接调用 `findDOMNode`,而是使用 React 提供的替代方法,比如使用 ref 来访问 DOM 节点。
2. 如果你正在使用类组件,可以给对应的组件添加一个 ref 属性,并在组件的其他方法中通过 `this.ref` 来访问 DOM 元素。
3. 如果你在使用函数组件,可以使用 React 的 `useRef` 钩子(hook)来创建一个 ref,并将其传递给组件。
下面是一个使用函数组件和 `useRef` 钩子的例子:
```jsx
import React, { useRef } from 'react';
import ReactQuill, { Quill } from 'react-quill';
import 'react-quill/dist/quill.snow.css'; // 引入样式
const RichTextEditor = () => {
const ref = useRef(null);
const focusEditor = () => {
if (ref.current) {
ref.current.editor.focus();
}
};
return (
<div>
<ReactQuill ref={ref} onChange={() => console.log('content changed')} />
<button onClick={focusEditor}>Focus Editor</button>
</div>
);
};
export default RichTextEditor;
```
在这个例子中,我们创建了一个 ref 并将其传递给 `ReactQuill` 组件,然后我们就可以通过 `ref.current.editor.focus()` 来聚焦编辑器。