javascript - 当我映射对象数组时如何突出显示多个项目？

Question

我试图弄清楚如何突出显示所选的多个对象，或者更好的是调用我在代码中插入的复选标记。我的零食在这里:

https://snack.expo.io/@fauslyfox110/testingreferrals

具体映射在这里:

const ContactRow = React.memo(
  ({ onPress, name, email, phone, selected }: ContactRowProps) => {
    return (

      <TouchableHighlight onPress={onPress}>
        <View
          style={{ padding: 16, flexDirection: 'row', alignItems: 'center' }}>
             <Text style={{ marginRight: 16 }}>{selected ? '✅' : '⭕️'}</Text>
            <View style={{ flex: 1 }}>
              <Text>{name}</Text>
              {name.length > 0 && (
                <View>
                <Text style={{ marginTop: 4, color: '#666' }}>
                  {email}
                </Text>
                <Text style={{ marginTop: 4, color: '#666' }}>
                  {phone}
                </Text>
                </View>
              )}
            </View>
          </View>
      </TouchableHighlight>

          );
      }
    );

我从手机中提取联系人，然后映射它们以将它们呈现为列表。我可以选择多个项目并传递要在按钮中呈现的数字，但我希望它们切换到复选标记或更改颜色以帮助用户。

Answer 1

我注意到您没有将“selected”属性传递给 ContactRow。

<ContactRow
    onPress={ ()=> this.addSelectedContact({id: contact.name,name: contact.name, email:contact.email, phone:contact.phone}) }
    name={ contact.name } 
    emailOrNumber={ contact.email || contact.phone }
/>

更改为

<ContactRow
    onPress={ ()=> this.addSelectedContact({id: contact.name,name: contact.name, email:contact.email, phone:contact.phone}) }
    name={ contact.name } 
    emailOrNumber={ contact.email || contact.phone }
    selected={Boolean(this.state.selectedContacts.find(item => item.name === contact.name && item.phone === contact.phone)}
/>