javascript - 如何处理由数组渲染的组件中的一个元素/索引的样式？

Question

我需要根据一些参数处理组件中元素的样式。

我有这个代码:

<View>
  {assignedPassengersData.map((info, index) => (
    <View
      key={info.id}
      opacity={info.id === passengerCardId ? 1 : 0.5}
    >
      <PassengersInfo
        id={info.id}
        buttonText={
          passengerCardId === info.id ? 'CONFIRM DROPOFF' : 'START NAVIGATING'
        }
        btnStyle={[
          passengerCardId === info.id
            ? { backgroundColor: '#263238' }
            : navigationStore.index
            ? { backgroundColor: Colors.pickupTabColor }
            : { backgroundColor: Colors.dropOffTabColor },
        ]}
      />
    </View>
  ))}
</View>

我需要处理的 Prop 是opacity。

这里:

opacity={info.id === passengerCardId ? 1 : 0.5}

我现在的代码方式仅在满足该条件时才起作用，因此我可以使用 opacity: 1 看到我需要的元素。因此其余元素始终具有不透明度:0.5。我需要当应用程序加载时，所有内容都应该具有 opacity: 1。仅在满足条件的元素中，当 info.id === PassengerCardId 不透明度应设置为 1。然后，其余元素的不透明度应设置为 0.5。

那么，我怎样才能实现我所需要的呢？

Answer 1

如果我是你，我会创建一个外部函数。

类似于:

getOpacity = infoId => {
   const {pessengerCardId} = this.props; ==> supposing your pessengerCardId comes from props;

   if(passengerCardId && infoId !== pessengerCardId) {
     return 0.5;
   }

   return 1;
}

您的代码应类似于:

<View>
{assignedPassengersData.map((info, index) => (
   <View
     key={info.id}
     opacity={() => this.getOpacity(info.id)}
   >
     <PassengersInfo
      id={info.id}
      buttonText={
        passengerCardId === info.id ? 'CONFIRM DROPOFF' : 'START NAVIGATING'
      }
      btnStyle={[
        passengerCardId === info.id
          ? { backgroundColor: '#263238' }
          : navigationStore.index
          ? { backgroundColor: Colors.pickupTabColor }
          : { backgroundColor: Colors.dropOffTabColor },
      ]}
    />
  </View>
 ))}
</View>