React Ace Editor 值未显示答案

【问题标题】：React Ace Editor value not showingReact Ace Editor 值未显示
【发布时间】：2020-12-24 04:08:41
【问题描述】：

我希望通过我的反应组件中的值道具显示一些代码，但编辑器只是保持空白并且不显示任何值。我可以在编辑器中输入，一切似乎都在工作，包括语法突出显示。看不到错误。我错过了什么明显的东西吗？

我应该注意，我正在使用 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;

【问题讨论】：

标签： javascript reactjs ace-editor

【解决方案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 的属性是将代码字符串传递给编辑器的属性。尝试将 value 重命名为 setValue。

【讨论】：

效果很好。值现在可以正常显示了！