в моем приложении 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>
Вы можете объявить переменную и использовать условия для определения ее значения
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()} />
Используйте 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.
Надеюсь, это поможет!
Спасибо, но теперь я получаю [eslint] Не вкладывайте тернарные выражения. (без вложенных троичных)