javascript - React.js，具有不同背景颜色的表格单元

在React应用程序中，我有一个表（使用语义ui）。我想通过一个条件来改变。
在大多数例子中，我看到的是bgcolor
但是我需要检查数组中的值是否存在。因此，如果值在bgcolor={(condition)?'red':'blue'}中，则应用一个arrayOne，如果值在bgcolor中，则应用另一种颜色否则不arrayTwo
我试过了，但错了

                    <Table.Cell
                      key={value}
                      selectable
                      {...arrayOne.includes(value)?{bgcolor="red"}:{}}
                      {...arrayTwo.includes(value)?{bgcolor="blue"}:{}}
                    >
                      {value}
                    </Table.Cell>

最佳答案

使用style而不是bgcolor，因为HTML5不再支持它。即使您在没有条件逻辑的情况下尝试它，bgcolor也不会影响<td>，而不管React如何。根据W3Schools：
HTML5不支持的bgcolor属性。使用CSS
相反。
在style函数中有条件地设置render()属性。本例使用@OlivierBoissé方法有条件地设置值，但是您可以真正使用任何您熟悉的条件方法，并且ESLint不会抱怨。使用inherit时，可以将CSSbackground-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示例。
希望能帮上忙！