React Ace编辑器值未显示

问题描述

我希望通过我的react组件中的value道具显示一些代码，但编辑器只是保持空白并且不显示任何值。我可以在编辑器中键入内容，一切似乎都可以正常工作，包括语法突出显示。看不见错误。我缺少明显的东西吗？

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

解决方法

库 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。