如何使用JSON与反应王牌？ 爪哇原理 JSON不起作用？错误

如何解决如何使用JSON与反应王牌？ 爪哇原理 JSON不起作用？错误

我正在使用 react-ace 并尝试使用 java 语法的自述示例。效果很好。但我似乎无法将它设置为JSON。

爪哇原理

import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/theme-github";

<AceEditor
    mode="java"
    theme="github"
    name="UNIQUE_ID_OF_DIV"
    editorProps={{ $blockScrolling: true }}
/>  

JSON不起作用？

import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/theme-github";

<AceEditor
    mode="json"
    theme="github"
    name="UNIQUE_ID_OF_DIV"
    editorProps={{ $blockScrolling: true }}
/>  

错误

拒绝从” ..... /工人-json.js'执行脚本，因为它的MIME类型（文本/ html“）是不可执行的。 （匿名）@ 2f896707-86be-497A-93b2-e1711942d7c7：1 2f896707-86be-497A-93b2-e1711942d7c7：1未捕获的抛出：DOMException：未能执行上 'WorkerGlobalScope' 'importScripts'：在未能加载” ..... /工人-json.js'脚本

如何使用 JSON？

解决方法

尝试设置选项 useWorker: false

      <AceEditor
        mode="json"
        theme="github"
        onChange={onChange}
        name="UNIQUE_ID_OF_DIV"
        editorProps={{ $blockScrolling: true }}
        setOptions={{
          useWorker: false
        }}
      />

,

根据我的理解，您需要采取任何一种方式来解决工人问题。

• 导入此 ace-builds/webpack-resolver：

import AceEditor from "react-ace";

import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/theme-github";

import 'ace-builds/webpack-resolver';

• 使用 file-loader 加载 worker-json 文件，然后配置 ace worker：

import AceEditor from "react-ace";

import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/theme-github";

import ace from "ace-builds";

// `webpack` would return the url for `worker-json.js`
// then we use it to configure `ace`
import jsonWorkerUrl from "file-loader!ace-builds/src-noconflict/worker-json";

ace.config.setModuleUrl("ace/mode/json_worker",jsonWorkerUrl);