Javascript 如何在映射过程中推送新数组中的特定项？

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

为了做到这一点，我在div上有一个包含映射项的ref。一旦它的高度改变，我就知道我在另一条线上，是时候停止显示项目了

我写道：

const组件=（{myArray}）=>{
让ref=React.useRef（）；
const{height，width}=useSize（ref）；
const availableSpace=24；
常量otherArray=[]；
报税表（
{myArray.map（{label}=>{
高度>24&&otherArray.push（{label}）；
返回(
//东西
)
})}
{otherArray&&otherArray.length>0&&(
showRemainingItemsInAPopover}>
+{otherArray.length}
)}
)
}

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

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

{myArray.map（{label}=>{
高度>24&&otherArray.push（{label}）；
返回(
//东西
)
}).filter（（）=>高度也许您可以使用filter函数：

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


{myArray.map（{label}=>{
高度>24&&otherArray.push（{label}）；
返回(
//东西
)
}).filter（（）=>height不确定数组中有多少项，如果出于性能原因尝试执行此操作

是否可以使用css设置
最大高度：24px；溢出：隐藏；
，然后使用React切换最大高度属性

也就是说，
不确定数组中有多少项，如果您出于性能原因尝试这样做

是否可以使用css设置
最大高度：24px；溢出：隐藏；
，然后使用React切换最大高度属性

例如
是的，可能值得注意的是，如果高度被声明在过滤器/映射函数的范围之外，那么它将始终是相同的值（因此，所有元素都将>24，或者所有值都将是感谢的，但这并不能解决问题。我用完整的代码更新了我的原始帖子（我刚刚删除了“每个项目如何呈现”部分）。如果您在console.log height>24中尝试您的条件，您是否得到一个小于24的值？它只显示true或false。高度不是项目的属性。它与主div的高度有关。此信息是通过引用获得的。确定，但我只想知道此条件的结果。实际上，我只想看看您的所有数组是否都在o中therArray，这是因为height始终>24，可能是因为div始终具有相同的值是的，可能值得注意的是，如果height声明在filter/map函数的范围之外，那么它将始终具有相同的值（因此，要么所有元素都大于24，要么所有值都是感谢，但这并不能解决问题。我用完整的代码更新了我的原始帖子（我刚刚删除了“每个项目如何呈现”部分）。如果您在console.log height>24中尝试您的条件，您是否得到一个小于24的值？它只显示true或false。高度不是项目的属性。它与主div的高度有关。此信息是通过引用获得的。确定，但我只想知道此条件的结果。实际上，我只想看看您的所有数组是否都在o中therArray，这是因为高度总是>24，可能是因为div总是具有相同的值。我认为这不是绝对重要的，但是你介意发布代码片段的其余部分吗？（//stuff）我用完整的代码更新了我的原始帖子（我刚刚删除了“每个项目如何呈现”部分）.//stuff并不是要用css来打扰您。它只是一个带有样式化组件的布局，用于显示每个项目。但是//stuff是map（）返回的内容函数。我觉得这很重要。有两个主要问题：高度在map函数的范围内没有更新，而且map也没有过滤结果，你应该使用filter而不是headif height。如果height不是数组元素的属性，那么任何map或filter的结果都是相同的，因为对于每个元素，h“八个永不改变”…我并不认为这绝对重要，但你介意发布片段的其余部分吗？（//stuff）我已经用完整的代码更新了我的原始帖子（我刚刚删除了“每个项目如何呈现”部分）.//stuff并不是要用css来打扰您。它只是一个带有样式化组件的布局，用于显示每个项目。但是//stuff是map（）返回的内容函数。我觉得这很重要。有两个主要问题：高度在map函数的范围内没有更新，而且map也没有过滤结果，你应该使用filter而不是headif height。如果height不是数组元素的属性，那么任何map或filter的结果都是相同的，因为对于每个元素，h八个永不改变…不，我需要在弹出框中显示所有隐藏的项目，点击“显示更多”后会显示“按钮。这就是我需要两个数组的原因。我不能简单地在小div和大div之间切换。项目是什么类型的内容？您知道项目的当前宽度还是相对宽度吗？项目是一个具有4个属性的对象：id、颜色、标签和一个称为“数据”的对象数组“。后者有一个数字和一个日期。我不知道每个项目的宽度。它取决于其标签长度。宽度由父组件设置。请尝试以下操作：非常感谢您的帮助，但它没有按预期工作。调整屏幕大小时，数组不会更新。顶部始终有5个项目，其余项目在“显示更多”中”div。它不是实时更新的。不，我需要在弹出窗口中显示所有隐藏的项目，单击“显示更多”按钮后会显示。这就是为什么我需要两个数组。我不能简单地在小div和大div之间切换。什么类型的内容是一个项目？你知道一个项目的宽度吗？或者是相对宽度？一个项目