javascript - 在reactjs中更改表格地图中条件的颜色

Question

我想更改表中 td 条目的颜色。好像当前余额小于 100，红色应该是红色。如果当前余额在 100 和 200 之间，当前余额颜色变为黄色，否则当前余额列颜色应为绿色。这些值是硬编码的，如果我改变值，颜色应该相应地改变。

这是我的代码：

import React from 'react';
import * as Icon from 'react-feather';
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import { Dropdown, Table, Badge } from 'react-bootstrap';

class ChurnCustomer extends React.Component {
    constructor(props) {
        super(props);
        this.state =
        {
            title: "New Users",
            users: [
                {
                    id: 1,
                    name: "Addison Mary",
                    email: "[e-mail]",
                    phoneNo: '724313577059',
                    CurrentBalance: 356
                },
                {
                    id: 2,
                    name: "Rosemary Joe",
                    email: "[e-mail]",
                    phoneNo: '003135770259',
                    CurrentBalance: 125,
                },
                {
                    id: 3,
                    name: "Scarlett Skyler",
                    email: "[e-mail]",
                    phoneNo: '933135770134',
                    CurrentBalance: 49
                },
                {
                    id: 4,
                    name: "Victoria B.",
                    email: "victoriaBgmail.com",
                    phoneNo: '003357577009',
                    CurrentBalance: 195
                },
                {
                    id: 5,
                    name: "Philip",
                    email: "[e-mail]",
                    phoneNo: '005613570459',
                    CurrentBalance: 249
                },
                {
                    id: 6,
                    name: "Zoe Nelms",
                    email: "[e-mail]",
                    phoneNo: '923135770459',
                    CurrentBalance: 99
                }
            ]
        }
    }
    render() {
        const { users } = this.state;
        return (
            <div className='Customer-tables-div'>
                <div className="card mb-4">
                    <div className="card-body">
                        <div className="card-header d-flex">
                            <h5 className="card-title w-50 float-left">Churn Customer</h5>

                        </div>

                        <div className="height-310">
                            <Table className="m-0" responsive>
                                <thead>
                                    <tr>
                                        <th>Customer Name</th>
                                        <th>Email</th>
                                        <th>Phone No.</th>
                                        <th>Current Balance</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    {users.map((user, idx) => (
                                        <tr key={idx}>
                                            <td>{user.name}</td>
                                            <td>{user.email}</td>
                                            <td>{user.phoneNo}</td>
                                            <td>
                                                {user.CurrentBalance}
                                            </td>

                                        </tr>
                                    ))}
                                </tbody>
                            </Table>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default ChurnCustomer;

我想根据上述条件更改当前余额的颜色。

标签： javascriptcssreactjsreact-redux

Answer 1

让我们尝试内联样式，例如：

   {users.map((user, idx) => {
        let color = user.CurrentBalance < 100 ? 'red' : (user.CurrentBalance <= 200 ? 'yellow' : 'green');

        return <tr key={idx}>
            <td>{user.name}</td>
            <td>{user.email}</td>
            <td>{user.phoneNo}</td>
            <td style={{backgroundColor: color}}>
                {user.CurrentBalance}
            </td>

        </tr>
    }}