[英]React Bootstrap Table: Inline Style to Change Background Color Based on Value
我有一个看起来很简单的问题,但我不知道如何解决它。 基本上,我有一个 React Bootstrap Table
,它呈现来自 API 的表数据。 如果数据中的特定值大于零,我想做的是将行颜色更改为绿色......这是一个例子:
const TableComponent = ({ fixtures }) => {
return (
<Table>
<tbody>
{fixtures.map((fixture) => (
<tr
key={fixture.id}
style={{
backgroundColor: 'green'
}}
>
<td> {fixture.value1} </td>
</tr>
))}
</tbody>
</Table>
);
};
因此,该行始终默认为绿色backgroundColor
颜色。 是否可以编写 function 以便如果fixture.value2
或fixture.value3
大于零,则backgroundColor
颜色为绿色,否则设置为默认值?
这个对我有用。 像这样试试。
const TableComponent = ({ fixtures }) => {
return (
<Table>
<tbody>
{fixtures.map((fixture) => (
<tr
key={fixture.id}
style={fixture.value2>0|| fixture.value3>0?{backgroundColor:'green'}:{}}
>
<td> {fixture.value1} </td>
</tr>
))}
</tbody>
</Table>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.