我如何摆脱出现在AceEditor组件中的垂直线？

Question

我在我的react组件中使用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%"
/>