[英]React Bootstrap Table: Inline Style to Change Background Color Based on Value
I have a problem that seems simple but I'm not sure how to get around it.我有一个看起来很简单的问题,但我不知道如何解决它。 Basically, I have a React Bootstrap
Table
that renders table data coming in from an API.基本上,我有一个 React Bootstrap
Table
,它呈现来自 API 的表数据。 What I would like to do is to change a row color to green if a specific value in the data is greater than zero... here is an example:如果数据中的特定值大于零,我想做的是将行颜色更改为绿色......这是一个例子:
const TableComponent = ({ fixtures }) => {
return (
<Table>
<tbody>
{fixtures.map((fixture) => (
<tr
key={fixture.id}
style={{
backgroundColor: 'green'
}}
>
<td> {fixture.value1} </td>
</tr>
))}
</tbody>
</Table>
);
};
So this defaults to a green backgroundColor
for the row at all times.因此,该行始终默认为绿色
backgroundColor
颜色。 Is it possible to write a function so that, if fixture.value2
or fixture.value3
is greater than zero, the backgroundColor
is green, but set to default otherwise?是否可以编写 function 以便如果
fixture.value2
或fixture.value3
大于零,则backgroundColor
颜色为绿色,否则设置为默认值?
It works for me.这个对我有用。 Try like this.
像这样试试。
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.