Reactjs, ячейка таблицы с другим цветом фона

в моем приложении React у меня есть таблица (с использованием семантического интерфейса). Я хочу поменять bgcolor по условию. в большинстве примеров я вижу как bgcolor = {(condition)?'red':'blue'} но мне нужно проверить, существует ли значение в массиве. поэтому, если значение находится в arrayOne, примените bgcolor, если значение в arrayTwo, примените другой цвет, иначе нет bgcolor

Я пробовал это, что неправильно

                    <Table.Cell
                      key = {value}
                      selectable
                      {...arrayOne.includes(value)?{bgcolor = "red"}:{}}
                      {...arrayTwo.includes(value)?{bgcolor = "blue"}:{}}
                    >
                      {value}
                    </Table.Cell>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
6 204
3

Ответы 3

Вы можете объявить переменную и использовать условия для определения ее значения

let bgcolor;

if (arrayOne.includes(value)) {
  bgcolor = 'red';
} else if ( arrayTwo.includes(value)) {
  bgcolor = 'blue';
}

потом

<Table.Cell
    key = {value}
    selectable
    bgcolor = {bgcolor}
>
  {value}
</Table.Cell>

Создать функцию

getColor = (value) => array2.includes(value) ? {bgcolor:'red'} : array1.includes(value) ? {bgcolor:'blue'} : {}

И <Cell {...getColor()} />

Спасибо, но теперь я получаю [eslint] Не вкладывайте тернарные выражения. (без вложенных троичных)

Amir-Mousavi 04.09.2018 20:52

Используйте style вместо bgcolor, поскольку он больше не поддерживается в HTML5. Даже если вы попробуете это без условной логики, bgcolor не повлияет на <td>, независимо от React. По W3Школы:

The bgcolor attribute of is not supported in HTML5. Use CSS instead.

Установка свойства style условно в функции render(). В этом примере используется подход @ OlivierBoissé для условной установки значения, но вы действительно можете использовать любой условный подход, который вам удобен, и ESLint не жалуется. Вы можете использовать CSS inherit как значение по умолчанию при работе с background-color:

// default
let backgroundColor = 'inherit';

if (arrayOne.includes(value)) {
  backgroundColor = 'red';
} else if (arrayTwo.includes(value)) {
  backgroundColor = 'blue';
}

{/* or if you need one color to take precedence when value is in both arrays
if (arrayOne.includes(value)) {
  backgroundColor = 'red';
}
if (arrayTwo.includes(value)) {
  backgroundColor = 'blue';
}
*/}

<Table.Cell
key = {value}
selectable
style = {{backgroundColor}}
>
  {value}
</Table.Cell>

В качестве альтернативы вы также можете использовать className вместо style:

.foo { background-color: red; }
.bar { background-color: blue; }

let backgroundColor = '';

if (arrayOne.includes(value)) {
  backgroundColor = 'foo';
} else if (arrayTwo.includes(value)) {
  backgroundColor = 'bar';
}

<Table.Cell className = {backgroundColor} ...>

Вот рабочий пример StackBlitz.

Надеюсь, это поможет!

Другие вопросы по теме