reactjs - ReferenceError: ace 未定义

Question

我是 ace 新手，正在尝试使用 react-ace 构建编辑器。

这是我所做的：

1. npm install react-ace ace-builds
2. 我将以下代码添加到我的 App.js

import React from "react";
import { render } from "react-dom";
import AceEditor from "react-ace";

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

function onChange(newValue) {
  console.log("change", newValue);
}

// Render editor
render(
  <AceEditor
    mode="java"
    theme="github"
    onChange={onChange}
    name="UNIQUE_ID_OF_DIV"
    editorProps={{ $blockScrolling: true }}
  />,
  document.getElementById("example")
);

但是我的浏览器显示此错误：ReferenceError: ace is not defined

这是我的 package.json：

你能帮我吗。谢谢！

Answer 1

添加此代码

import 'ace-builds/src-noconflict/ace';

要了解更多信息，请参阅我们的https://github.com/securingsincity/react-ace/issues/1233

Answer 2

没有带有exampleid 的 DOM 元素。您正在使用 create-react-app 因此您需要替换行：

document.getElementById("example")

至

document.getElementById("root")

Answer 3

首先，在 App.js 中不需要再次使用 render 函数，因为 index.js 组件中已经使用了。例如，您的代码将如下所示：

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

const App = () => {

    const onChange = (newValue) => {
        console.log("change", newValue);
      }

    return (
        <AceEditor
            mode="java"
            theme="github"
            onChange={onChange}
            name="UNIQUE_ID_OF_DIV"
            editorProps={{ $blockScrolling: true }}
        />
    );
}

export default App;

Answer 4

进口

import 'ace-builds/src-noconflict/ace';

根据：https ://github.com/securingsincity/react-ace/issues/1233