反应拆分面板调整大小

Posted 2023-02-19

【中文标题】反应拆分面板调整大小

【英文标题】：react split panel resize

【发布时间】：2016-11-08 14:00:01

【问题描述】：

我正在尝试使用 react 和基础创建动态调整大小的面板。我已经尝试过 react-split-pane 和其他类似的库，但是它们扰乱了页面的响应性。我也尝试了 resize css3 属性，但它并不灵活，因为它只允许容器的大小仅调整到右侧和底部，并且我无法将调整大小手柄设置为水平或垂直条。

任何建议都会有所帮助。

【问题讨论】：

我一直在为自己的项目玩这个，但还没有找到一个好的解决方案。我一直在尝试使用onDrag 事件和draggable=true 设置在我的组件边框上的句柄上。当onDrag 事件触发时，回调接收一个带有clientY 属性的event 对象（或clientX）来指示它的新位置。在我的处理函数中，我区分了新的clientY 和旧的clientY，以确定用户移动鼠标的方向。然后this.setState(panelSize: this.state.panelSize + increment)。我的面板高度设置为this.state.panelSize。

[...cont] 不幸的是这个方法计算量有点大，所以运行的不是很顺利，但也许通过调整大小increment或debounceing更新函数可以平滑出来。无论如何，如果我走得更远，我会在这里发布，但如果这仍然在你的待办事项列表上，我想分享方法。

【参考方案1】：

一旦pull request 76 得到处理，react-resizeable 就可以做到这一点。

目前，您可以从the fork 获取代码。