如何根據屏幕大小有條件地在 React 中顯示列表項

Question

我正在嘗試使用“更多”菜單創建導航。 這似乎是一個相當簡單的概念。CBS Sports 就是一個例子（ https://www.cbssports.com/ ）

基本上顯示盡可能多的鏈接，然后將 rest 推到下拉列表中。

有沒有正確的方法來實現這個反應？ 基本上根據屏幕大小改變可見項目的數量？

我一直在嘗試找到一個實現示例，但不知道如何找到它。

Answer 1

對我來說，根據屏幕大小更改可見項目的數量是個好主意。 您可以創建變量，為您提供可見項目的數量。 稍后您可以在從包含所有項目的數組中過濾項目后 map 。 例如

arr.filter((_,i)=> i < number).map(item=> (<li>{item}</li>))

對於 go 下拉的項目

arr.filter((_,i)=> i >= number).map(item=> (<li>{item}</li>))