reactjs - 如何摆脱 AceEditor 组件中出现的垂直线？

Question

我在我的反应组件中使用 react-ace

这是他们在 npmjs 上提供的示例（加上一点服装）：

import React from "react";
import AceEditor from "react-ace";

import "brace/mode/python";
import "brace/theme/github";

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

function CustomAceEditor() {
  return (
    <AceEditor
      mode="python"
      theme="github"
      onChange={onChange}
      name="UNIQUE_ID_OF_DIV"
      editorProps={{ $blockScrolling: true }}
      width="100%"
    />
  );
}

export default CustomAceEditor;

当我编译并执行此代码时，我得到下图中的结果

但正如您所见，视图中有一条垂直线..我该如何摆脱它？

Answer 1

我认为那行是编辑器的打印边距。有一个标志可以删除它：

showPrintMargin={false}

在你的情况下：

<AceEditor
  mode="python"
  theme="github"
  onChange={onChange}
  showPrintMargin={false}
  name="UNIQUE_ID_OF_DIV"
  editorProps={{ $blockScrolling: true }}
  width="100%"
/>