将 showPrintMargin 设置为 false 在 React Ace 编辑器中不起作用

Question

我正在尝试删除 React ace 编辑器中的垂直线：

我尝试将 printMargin 设置为 false 但似乎不起作用。也尝试重新启动服务器，但没有任何结果。如果有帮助的话，我也在使用 next.js。

代码如下：

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

    function CodeEditor(props) {
      return (
        <ReactAce
          value={`function onLoad(editor) {
          console.log("i've loaded");
        }`}
          mode="javascript"
          theme="xcode"
          showPrintMargin={false}
          setReadOnly={false}
          setValue={props.value}
          style={{
            height: "500px",
            fontSize: "16px",
          }}
        />
      );
    }
    export default CodeEditor;

Answer 1

您正在使用

react-ace-editor

npm 包，它不是react-ace 的原始包。这可能就是不支持该选项的原因。相反，你应该使用 react-ace:

import ReactAce from 'react-ace';

然后就可以了，就像这样 stackblitz demo .

（取消注释

showPrintMargin

选项以查看更改。）

Answer 2

从“react-ace”导入ReactAce；安装了 import ReactAce from "react-ace-editor";