有人可以帮我使用react-codemirror2启用代码折叠吗？

Question

我的网络应用程序当前正在使用react-codemirror2来显示JSON数据。不幸的是，JSON 文件变得如此之大，以至于滚动数据成为一个问题。我想实现代码折叠以帮助简化应用程序的用户，但目前无法找到有关如何执行此操作的任何文档。

我尝试将

foldGutter: true

添加到 options 属性中，但没有成功。

Answer 1

您是否导入了折叠所需的所有插件？ 试试这个

import { UnControlled as CodeMirror } from "react-codemirror2";
import "codemirror/mode/javascript/javascript";
import "codemirror/addon/fold/foldcode";
import "codemirror/addon/fold/foldgutter";
import "codemirror/addon/fold/brace-fold";
import "codemirror/lib/codemirror.css";
import "codemirror/addon/fold/foldgutter.css";

export default function App() {
  return (
      <CodeMirror
        value="<h1>I ♥ react-codemirror2</h1>"
        options={{
          mode: "javascript",
          lineNumbers: true,
          gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
          foldGutter: true,
        }}
        onChange={(editor, data, value) => {}}
      />
  );
}

如果这对您不起作用，您可以尝试以下网站：https://codemirror.net/5/demo/folding.html