动态高度未正确更新

Question

我想让xtermjs的高度变得动态。我环顾四周，但解决办法似乎解决不了我的问题。我玩过CSS，但问题似乎并不存在。我也在使用xterm-addon-fit。

举个例子，我创建了这个沙盒来展示这个问题。我添加了一个拖动窗格，它在底部有一些难以看到的黑条。当我拖动它时，xtermjs组件不会调整大小。

在下面的图像中，当我们调整橙色框的大小后，带有数字的黑匣子(xterm)应该在橙色框中。

​

我使用了一个组件来简化测试，但是如果我们以其他方式调整窗口的大小，就会发生这种情况。

我在这里错过了什么？

Answer 1

正如@jerk所解释的那样，如果我们在调整大小时进行fit，它就解决了这个问题。这个带有额外钩子的钩子使其工作。尽管现在要测试它，您必须上下拖动控制台窗格，而不是使用自定义组件。

  // It resizes xterm when the height changes
  useEffect(() => {
    fitAddon.fit();
  }, [height]);

注意自动滚动停止。根据场景的不同，您可能希望滚动到底部。