Блог

Главная - Вопросы по программированию - Как обрабатывать стиль одного элемента / индекса в компоненте, отображаемом массивом?

Как обрабатывать стиль одного элемента / индекса в компоненте, отображаемом массивом?

#javascript #reactjs #ecmascript-6

#javascript #reactjs #ecmascript-6

Вопрос:

Мне нужно обработать стиль элемента в компоненте на основе некоторых параметров.

У меня есть этот код:

 <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>

Реквизит, который мне нужно обработать, это opacity .

Здесь:

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

Способ, которым я располагаю кодом прямо сейчас, работает только при выполнении этого условия, поэтому я могу видеть нужный мне элемент с opacity: 1 . Таким образом, остальные элементы всегда имеют opacity: 0.5 . Мне нужно, чтобы при загрузке приложения все должно иметь opacity: 1 . info.id === passengerCardId Непрозрачность when должна быть установлена на 1 только в элементе, который выполняет условие. Тогда для остальных элементов должно быть установлено значение непрозрачности 0.5 .

Итак, как я могу достичь того, что мне нужно?

Ответ №1:

На вашем месте я бы создал внешнюю функцию.

Что-то вроде:

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

   if(passengerCardId amp;amp; 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>

Комментарии:

1. Ммм, но как мне вызвать эту функцию? Например, просто вызывая его здесь opacity={() => this.getOpacity(info.id)} , вы не собираетесь вызывать функцию.

2. В какой момент вы хотите вызвать? наведение курсора мыши? onClick? Или сразу после отображения компонента?

3. Когда компонент отображает. Я знаю, что могу сделать это с помощью componentDidMount или componentDidUpdate, но тогда я потеряю параметр: infoId .

4. это должно сработать, поскольку метод render будет вызван снова, как только изменится реквизит, поэтому метод getOpacity будет вызван снова…

5. Я имею в виду, как мне вызвать параметр infoId , если я вызываю функцию в любом из методов жизненного цикла?