react-draft-wysiwyg点击工具栏按钮无效（如插入图片）

使用 react-draft-wysiwyg 搭配新版 React 开发，发现工具栏（Toolbar）的添加图片、添加表情、添加图像、文字下拉列表等点击无效。

现象

使用新版本 Create-React-App 创建的 React 工程，引入 react-draft-wysiwyg 作为文本编辑器。

页面运行时，点击工具栏（Toolbar）的下拉列表、添加表情、图像等没有反应。

查看控制台，在页面加载时有如下 Warning：

Warning: Can’t call setState on a component that is not yet mounted.This is a no-op, but it might indicate a bug in your application.Instead, assign to this.state directly or define a state = {};class property with the desired state in the r component.

此时输入文本、文本加粗、斜体等功能正常，但插入图片、链接等有“弹出窗口”的按钮点击后无反应，也没有报错。

原因

我不是专业前端，看 Git 上的讨论，似乎该问题是由于创建的 React 18 工程默认使用了严格模式（Strict Mode）导致的。

我不太理解个中缘由，同时也不理解为何一个 2020 年的 issue 至今仍未修复（作者也没有批准别人修复此问题的 pull request）。

当然，正如我所说，我不是专业前端。

解决

坚持不懈

如果坚持使用 react-draft-wysiwyg ，那么最方便的做法是在 index.js 中禁用掉严格模式：

root.render(
    // 禁用 StrictMode
    // <React.StrictMode>
        <App />
    // </React.StrictMode>
);

另辟蹊径

选择 React Quill 等其他类似的插件。