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

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

0 голосов
/ 04 сентября 2018

в моем приложении 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>

Ответы [ 3 ]

0 голосов
/ 04 сентября 2018

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

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

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

0 голосов
/ 04 сентября 2018

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

Атрибут bgcolor не поддерживается в HTML5. Использовать CSS вместо этого.

Установка свойства 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 пример.

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

0 голосов
/ 04 сентября 2018

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

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