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

Posted 2023-03-28

【中文标题】如何使卡片组件与 react-split-pane 组件一起使用？

【英文标题】：How can I make the card component work with react-split-pane component?

【发布时间】：2020-12-11 17:56:57

【问题描述】：

Here 是我的代码。

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

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

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

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

【参考方案1】：

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

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

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

this.setOrientation = () => 

  let leftPanelMinWidth = 182;

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

我想你可以在组件挂载时实现相同的逻辑。

【讨论】：

最后放弃使用Splitpane