ReactJS - 屏幕缩小时将溢出的元素放入“...”下拉按钮

【问题标题】：ReactJS - put overflown elements into a “…” dropdown button when screen is shrinkReactJS - 屏幕缩小时将溢出的元素放入“...”下拉按钮
【发布时间】：2019-02-27 17:25:10
【问题描述】：

连续有 10 个开发 div，当我们使用 lx-px 时，我想在下拉按钮中显示 7 和剩余显示，当将其缩小到移动分辨率时，它会自动减少到 6、5、... 和剩余添加到下拉按钮。

【问题讨论】：

你必须给我们一些你尝试的代码示例。也看看这个线程如何正确提问：How to ask

标签： reactjs

【解决方案1】：

您需要首先检测父元素的尺寸，然后，如果您的每个元素都有固定的尺寸，那么确定其中有多少适合它是微不足道的。

如果您的元素没有固定大小，那么您需要检查每个元素的大小并计算适合的元素数量。

剩下要做的就是显示适合您屏幕的元素并在下拉列表中显示其余元素

一些线索：

window.resize

element.getBoundingClientRect

React refs and the DOM

【讨论】：