reactjs - 使用 react-ace diff 组件无法显示 diff 变化

Question

我想展示两个侧面内容之间的不同变化，但结果并没有显示出我期望的结果。没有显示任何变化。

我使用的 react-ace 版本是 7.0.5。

有人可以告诉我错过了哪一点。

import { diff as DiffEditor } from 'react-ace';
import brace from 'brace';

import 'brace/mode/json';
import 'brace/mode/html';
import 'brace/theme/github';
import 'brace/theme/monokai';
import 'brace/ext/language_tools';

export default class DiffChange extends Component {

  render() {

    return (
      <div>
        <div className={styles.container}>
            <DiffEditor
              value={[sceneCompDiff.changedContent, sceneCompDiff.originalContent]}
              mode="json"
              enableBasicAutocompletion
              enableLiveAutocompletion
              highlightActiveLine
              showGutter
              showPrintMargin
              wrapEnabled
              readOnly
              width="100%"
              height="700px"
              theme="github"
              setOptions={{
                enableBasicAutocompletion: true,
                enableLiveAutocompletion: true,
                enableSnippets: true,
                showLineNumbers: true,
                showConnectors: true,
                readOnly: true,
                tabSize: 2,
              }}
            />

        </div>
      </div>
    );
  }
}

Answer 1

您可能需要添加一个 CSS 类，例如：

.codeMarker  {
  background: #ffff99;
  position: absolute;
  z-index: 20;
}

至少，在我的情况下，这解决了同样的问题。
另请参阅https://github.com/securingsincity/react-ace/blob/master/example/diff.css。

（我也很难找到这个）