如何将信息(链接)推送到“...”根据React中的屏幕大小显示更多弹出窗口
我有一张卡，其中包括5个超链接在一行，我希望所有5个链接显示在任何屏幕宽度超过552px，然后低于552px，我希望只显示前两个链接，然后一个“...”单击时，将显示包含其余链接的弹出窗口。我做到了这一点，但它有很多重复的代码，所以我正在寻找一种更有效的方法。下面是我尝试过的一个例子：
const MiniModal = styled.div`
display: flex;
justify-content: center;
position: absolute;
z-index: 1;
text-align: center;
width: 160px;
height: auto;
padding: 12px;
position: relative;
top: 10%;
left: 63%;
margin: -25px;
background-color: #fff;
border: none;
border-radius: 12px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
border: 1px solid #eceff1;
outline: none;
overflow: hidden;
`
if (window.screen.width > 552) {
return (
<>
<a href="link">Link 1</a>
<a href="link">Link 2</a>
<a href="link">Link 3</a>
<a href="link">Link 4</a>
<a href="link">Link 5</a>
</>
)} else {
return (
<>
<a href="link">Link 1</a>
<a href="link">Link 2</a>
<MiniModal>
<a href="link">Link 3</a>
<a href="link">Link 4</a>
<a href="link">Link 5</a>
</MiniModal>
</>
)}
回答 1
Stack Overflow用户
发布于 2021-03-05 02:28:08
你试图做的事情有点不寻常，因为你试图让一些孩子看得见，一些孩子隐藏起来。通常，您会有两个独立的组件:一个用于桌面屏幕，另一个用于移动屏幕。桌面版本将显示所有孩子(使用媒体选择器在屏幕缩小时改变其大小/位置)，否则移动版本将合并所有孩子并有条件地显示它们(就像汉堡菜单一样)。
也就是说，我认为有两种选择可以达到预期的效果……
选项1
一种方法是，您可以简单地使用CSS media selectors，它可以在窗口更改时添加/删除类样式。然后，这些类将隐藏/显示组件，而不必更新React状态。这对于较老的设备/移动设备更好，因为它是浏览器实现。
这种方法的缺点是这两个组件仍然驻留在DOM中(它们被呈现，只是不可见)，因此您的HTML将以字节为单位变得更大。
选项2
另一种方法包括在窗口上设置侦听器，将其大小设置为React状态，当窗口达到一定大小时，React可以用一个组件替换另一个组件。更适合于屏幕更大的现代设备。
这种方法的缺点是，您可能会频繁地更新React状态，以反映窗口更改，这可能需要大量计算。因此，您可能会引入微卡顿。您可以限制状态更新，但它的响应性就不那么好了。
我认为确实没有最好的解决方案，因为采取任何一种方法都会导致某种惩罚。在这一点上，我建议将你的担忧分开:所有的孩子在桌面上都是可见的，所有的孩子在移动设备上都是隐藏的。
演示：
https://stackoverflow.com/questions/66485652
复制
腾讯云开发者
