下拉列表在React中没有使用React草稿-wysiwyg。

Question

我尝试使用react-draft-wysiwyg使用文档

会显示一些图标，但无法工作：block type、font、font size、pickerColor (下拉列表不起作用)。例如，font size被defauft设置为16，但我无法更改.

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

const TabContent = ({ name, typeProof }) => {
  const [text, setText] = useState(
  () => EditorState.createEmpty(),);


  return (
    <>
      <SafeAreaView>
        <Editor
          editorState={text}
          onEditorStateChange={setText}
          wrapperClassName="wrapperClassName"
          editorClassName="editorClassName"
          toolbarClassName="toolbarClassName"
          placeholder="Enter your text here:"
          style={{
           //some styles
          }}
          toolbar={{
            options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker', 'embedded', 'remove', 'history'],
            inline: { inDropdown: true },
            blockType: { inDropdown: true },
            fontSize: { inDropdown: true },
            fontFamily: { inDropdown: true },
            list: { inDropdown: true },
            textAlign: { inDropdown: true },
            colorPicker: { inDropdown: true },
            embedded: { inDropdown: true },
            remove: { inDropdown: true },
            history: { inDropdown: true },
         }}
        />
      </SafeAreaView>     
    </>
  );
};

export default function Tabs({ data }) {
  return (
    <TabsComponent forceRenderTabPanel>
      <TabList>
        {data.map(({ name }, i) => (
          <Tab key={name}>Question {i + 1}</Tab>
        ))}
      </TabList>
      {data.map(({ name, typeProof }) => (
        <TabPanel key={name}>
          <TabContent {...{ name, typeProof }} />
        </TabPanel>
      ))}
    </TabsComponent>
  );
}

Answer 1

这很奇怪，我对此没有任何解释，但我只在index.js上改变了

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

通过：

import "./index.css";
import App from "./App";
import React from "react";
import ReactDOM from "react-dom";

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

有什么解释吗？我很高兴知道..。

Answer 2

尝试用下面的示例SandboxExample替换代码

我认为您的沙箱依赖项配置不是很好，我也发现了类似的情况，我已经创建了一个新的Sandbox添加依赖项react-draft-wysiwyg和草案-js，导入编辑器并在应用程序组件中使用它，就像您在文件中使用的一样，并且一切都正常，尝试清除应用程序，阅读这个npx创建React应用。

​

我的沙箱例子 --这是我的函数组件的沙箱示例

希望是对你有帮助的