React分割面板调整大小

Question

React分割面板调整大小

4

我正在尝试使用React和Foundation创建动态调整大小的面板。我已经尝试过react-split-pane和其他类似的库，但它们会影响页面的响应性。我还尝试了resize css3属性，但它不够灵活，因为它只允许容器向右和向下调整大小，并且无法将调整大小的手柄样式设置为水平或垂直条形。

有什么建议吗？

- pro

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

不幸的是，这种方法计算上有点密集，所以进展并不顺利，但也许通过调整大小的“增量”或减少更新函数的抖动可以使其平滑。无论如何，如果我有进一步的进展，我会在这里发布，但希望分享这种方法，以防这仍然在您的待办列表中。 - Brandon

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- NH. · Answer 1

一旦pull request 76得到处理，使用react-resizeable将成为可能。

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