如何在映射过程中将特定项目推入新数组？

Question

我正在映射对象数组。我只想显示可以放在一行中的项目。其他的则必须放入一个新的数组中，该数组将显示在其他位置（“查看更多按钮” +弹出窗口）。

为了做到这一点，我在div上有一个引用，其中包含映射的项目。一旦它的高度改变，我就知道我在另一行，并且是时候停止显示项目了。

我写道：

const Component = ({myArray}) => {
let ref = React.useRef();
const { height, width } = useSize(ref);
const availableSpace = 24;
const otherArray = [];

return (  
  <div ref={ref} style={{display: "flex" flexWrap;"flew-wrap"}}>
   {myArray.map({label} => {
        height > 24 && otherArray.push({label});
        return (
            //stuff
         )
      })}
    {otherArray && otherArray.length > 0 && (
    <button onClick={()=> showRemainingItemsInAPopover}>
        +{otherArray.length}
    </button>
    )}
    )
   }

可悲的是，React渲染所有项目，然后将所有项目再次推送到otherArray中。

如何实时将我的阵列一分为二？

谢谢！

Answer 1

也许您可以使用过滤器功能：

 <div ref={ref}>
  {myArray.map({label} => {
    height > 24 && otherArray.push({label});
    return (
        //stuff
     )
  }).filter(() => height <= 24)}

但是我希望看到更多代码来为您提供更多帮助。

Answer 2

不确定数组中有多少个项目，以及是否出于性能原因尝试这样做...

您可以不使用css来设置max-height: 24px; overflow: hidden;，然后使用React来切换max-height属性吗？

即https://codesandbox.io/s/red-wind-9c94z?fontsize=14&hidenavigation=1&theme=dark