Question

在我的React应用程序中，我有一个表（使用语义ui）。我想通过条件更改File "C:\Users\User\AppData\Local\Programs\Python\Python37-32\lib\site-packages\tensorflow\python\__init__.py", line 54, in <module> from tensorflow.python import pywrap_tensorflow File "C:\Users\User\AppData\Local\Programs\Python\Python37-32\lib\site-packages\tensorflow\python\pywrap_tensorflow.py", line 28, in <module> _pywrap_tensorflow = swig_import_helper() File "C:\Users\User\AppData\Local\Programs\Python\Python37-32\lib\site-packages\tensorflow\python\pywrap_tensorflow.py", line 20, in swig_import_helper import _pywrap_tensorflow ModuleNotFoundError: No module named '_pywrap_tensorflow' Error importing tensorflow. Unless you are using bazel, you should not try to import tensorflow from its source directory; please exit the tensorflow source tree, and relaunch your python interpreter from there.。在大多数示例中，我看到的是bgcolor 但我需要检查该值是否存在于数组中。因此，如果值在bgcolor={(condition)?'red':'blue'}中，则应用arrayOne，如果值在bgcolor中，则应用另一种颜色，否则不使用arrayTwo

我尝试了这是错误的

bgcolor

Answer 1

使用style代替bgcolor，因为HTML5不再支持它。即使您在没有条件逻辑的情况下进行尝试，bgcolor也不会影响<td>，而与React无关。根据{{3}}：

HTML5不支持的bgcolor属性。使用CSS 代替。

在style函数中有条件地设置render()属性。此示例使用@OlivierBoissé方法有条件地设置值，但是您可以使用任何您熟悉的条件方法，而ESLint不会抱怨。使用inherit时，可以将CSS 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} ...>

这是一个有效的W3Schools示例。

希望有帮助！

Answer 2

创建函数

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

还有<Cell {...getColor()} />

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

Reactjs，具有不同背景颜色的表格单元

3 个答案: