javascript - React Bootstrap Table：根据值更改背景颜色的内联样式

Question

我有一个看起来很简单的问题，但我不知道如何解决它。基本上，我有一个 React BootstrapTable可以呈现来自 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，该行始终默认为绿色。是否可以编写一个函数，如果fixture.value2或fixture.value3大于零，backgroundColor则为绿色，否则设置为默认值？

标签： javascriptcssreactjsreact-bootstrapreact-bootstrap-table

Answer 1

这个对我有用。像这样试试。

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>
    );
};