React 草稿所见即所得下拉菜单不起作用问题

Question

编辑器正在工作，但下拉菜单不起作用，

工具栏图像

import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';


const MyEditor = () => {

  let editorState = EditorState.createEmpty();

  const [description, setDescription] = useState(editorState);

  const onEditorStateChange = (editorState) => {
    setDescription(editorState);
  };

  return (
    <div>
      <Editor
        editorState={description}
        toolbarClassName="toolbarClassName"
        wrapperClassName="wrapperClassName"
        editorClassName="editorClassName"
        onEditorStateChange={onEditorStateChange}
      />
    </div>
  );
};

export default MyEditor;

单击下拉菜单时，它会在控制台中显示以下警告

控制台图像

Answer 1

如果您在严格模式下运行 React 应用程序，可能是由于这个原因（尝试删除 ）。这个库并不是最新的，我正在考虑在我的用例中使用 react-email-editor 。

Answer 2

更改你的index.js

来自

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

到

import React from "react";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { render } from "react-dom";                 // add this

render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);