在 react-split 中嵌入 react-ace答案

【问题标题】：Embedding react-ace in react-split在 react-split 中嵌入 react-ace
【发布时间】：2020-12-21 01:59:11
【问题描述】：

我在react-split 中嵌入了react-ace 的奇怪行为。这里我在两个窗格中嵌入了两个编辑器，并在第一个窗格的第一行输入了let x = "this line got scrolled left"：

在键入代码时，只要我点击编辑器前面的黄色标题div 中文本的最右侧边距，Ace 就会在我键入时开始向左滚动该行。我可以随后将文本滚动回视图，但 Ace 不允许我将光标定位到编辑器中该点的右侧。

如果我从每个窗格中删除前面的黄色标题，Ace 的行为就好像这个滚动点是第一个字符，因此在我键入时永远不会让我看到这些字符。

就好像浏览器认为窗格有一个宽度，而 Ace 认为它有另一个宽度，该宽度是使用编辑器在窗格中显示其他任何内容所需的最小宽度。

这是我的 React，使用 nextjs 实现：

import Split from 'react-split'
import AceEditor from 'react-ace'
import 'brace/mode/javascript'

export default function Home() {
  return (
    <main className="outermost">
      <Split
        className="my_split"
        sizes={[50, 50]}
        minSize={100}
        expandToMin={false}
        gutterSize={10}
        gutterAlign="center"
        snapOffset={0}
        direction="horizontal"
      >
        <CodePane id="left_pane" />
        <CodePane id="right_pane" />
      </Split>
    </main>
  )
}

function CodePane(props: {id: string}) {
  return <div id={props.id} className="code_pane">
    <div className="pane_header">Right code margin |</div>
    <AceEditor
      name={props.id + "_editor"}
      mode="javascript"
      height="100%"
      width="100%"
    />
  </div>;
}

这是我的 CSS：

body {
  padding: 0;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.outermost {
  width: 100%;
  height: 100vh;
  background-color: darkblue;
  padding: 20px;
}

.my_split {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  background-color: lightgray;
}

.pane_header {
  background-color: yellow;
  width: 100%;
  height: 20px;
}

.code_pane {
  height: 100%;
  background-color: red;
}

.split,
.gutter.gutter-horizontal {
  height: 100%;
}

我尝试实施 react-split docs 中的 CSS 建议。我也用float:left 实现了这个并且遇到了同样的问题。我可能搞错了，因为我发现文档很难理解。

我在 CSS 中做错了吗？感谢您提供的任何帮助。

（注意：我意识到 Ace 提供了一种拆分编辑器的方法，但这不是我想要在我的应用程序中做的事情。我只是使用两个编辑器进行演示。）

【问题讨论】：

标签： css reactjs ace-editor react-ace split.js

【解决方案1】：

afk-mario 提供了an answer on GitHub，我会总结一下。

Ace 编辑器会重新计算其大小以响应窗口resize 事件，因此我可以通过手动发出此事件来强制重新计算。

将以下内容添加到 React 的 componentDidMount() 和 Split 的 onDragEnd() 处理程序可以解决问题：

window.dispatchEvent(new Event('resize'));

【讨论】：