如何在react中比较数组和渲染元素

问题描述

我有两个数字数组，在第一个数组（CARD_ARRAY）中有X个数字（例如30个中的1个），而数组2有X个随机数，在这种情况下，我们使用10个随机数

当数字相等时，背景颜色为黑色，否则为白色。 我一直在使用样式组件<Number choose />来匹配数字，而<Number choose />则用于不匹配。

我的问题是如何创建一个组件并进行渲染，我确实创建了一个将两个数组进行比较的组件，以检查数字是否相等：

const NumbersRow = (num: any) => {    
   CARD_ARRAY.map((CARD_NUM: number) => {
          numeros.map((num: number) => {
            if (CARD_NUM === num) {
              return (
                <Number choose>{CARD_NUM}</Number>
              )
            } else {
              return (
                <Number>{CARD_NUM}</Number>
              )
            }
          })
        })
}

在页面中：{NumbersRow numbers={item.numbers} />

执行此操作的最佳方法是什么？ 谢谢顺便说一句。

解决方法

我认为，您可以执行类似的操作。 在CARD_ARRAY映射中，使用CARD_NUM方法检查numeros中是否存在includes。基于此，您可以将prop（颜色选择）传递给组件

CARD_ARRAY.map((CARD_NUM: number) => (
  <Number choose={numeros.includes(CARD_NUM) ? "black" : "white"}>
    {CARD_NUM}
  </Number>
));