React Ace Editor 值未显示

Question

我希望通过我的 React 组件中的值道具显示一些代码，但编辑器只是保持空白并且不显示任何值。我可以在编辑器中输入，一切似乎都正常，包括语法高亮显示。看不到任何错误。我是否漏掉了一些明显的东西？

我应该注意，我正在使用 next.js 和 react-ace，如下所示： https://github.com/mingderwang/ace-editor-with-next

这是我的主要 index.js 页面代码：

import dynamic from "next/dynamic";
const CodeEditor = dynamic(import("../components/codeEditor"), { ssr: false });

export default () => {
  return (
    <div>
      <CodeEditor value={"for (var i=0; i < 10; i++) {\n  console.log(i)\n}"} />
    </div>
  );
};

这里是 Ace CodeEditor 组件代码：

import ReactAce from "react-ace-editor";
import React from "react";

function CodeEditor(props) {
  return (
    <ReactAce
      value={props.value}
      mode="javascript"
      theme="xcode"
      setReadOnly={false}
      style={{
        height: "500px",
        fontSize: "16px",
      }}
    />
  );
}
export default CodeEditor;

Answer 1

库react-ace-editor实现了如下属性：

CodeEditor.propTypes = {
  editorId: PropTypes.string,
  onChange: PropTypes.func,
  setReadOnly: PropTypes.bool,
  setValue: PropTypes.string,
  theme: PropTypes.string,
  mode: PropTypes.string,
  style: PropTypes.object,
};

名为 setValue 的道具是将代码字符串传递给编辑器的道具。尝试将值重命名为 setValue。

React Ace Editor 值未显示

React Ace Editor value not showing

javascript

ace-editor

reactjs