reactjs - 如何使卡片组件与 react-split-pane 组件一起使用？

Question

这是我的代码。

我的问题是，如何在不使用 h-100 类的情况下使用卡片组件来填充 SplitPane 的第一个窗格？

这是因为当我在 Card 组件中使用 h-100 类时，当用户在移动平台上点击输入框时，它会破坏布局。

我尝试使用“flex-grow-1”类来解决问题，但是它不起作用。

除此之外，我不确定 react-split-pane 是否有自己的方向更改事件处理方法。如果是这样，请告诉我。

标签： reactjsreact-bootstrapstackblitzsplitpanecard

Answer 1

实现 usingflex-grow-1将不起作用，因为如果您检查元素，Card组件的父级是由 生成的附加div元素SplitPane并且不是flex容器。

您仍然可以使用h-100，但为了解决“small window.innerHeight”设备上的布局问题（例如您描述的在移动设备上打开虚拟键盘的场景），您只需在条件语句中进行调整即可评估是否SplitPane应该切换split道具horizontal或vertical

在下面的示例中，您可以看到我将左侧窗格的“最小宽度”考虑在内，以考虑widthStackBlitz 示例代码中的输入字段，该示例代码设置182px为我查看过的。

this.setOrientation = () => {

  let leftPanelMinWidth = 182;

  if (window.innerHeight > window.innerWidth - leftPanelMinWidth) {
    this.setState({ splitDirection: "horizontal" });
  } else {
    this.setState({ splitDirection: "vertical" });
  }
}

我想您可以在组件安装时在逻辑上实现相同的功能。