"bg-danger" 的类名始终应用于卡片，即使条件未得到满足也是如此

Question

我正在开发这个预算应用程序。这里 className = "bg-danger","bg-opacity-10" 应该只在 "amount" 大于 "max" 时应用。（数量 > 最大）但是这里 class 总是应用于 div.

App.js

import React from 'react'
import './App.css'
import { Container, Stack, Button } from 'react-bootstrap'
import BudgetCard from './components/BudgetCard'

function App() {
  return (
    <Container className="my-4">
      <Stack direction="horizontal" gap={2} className="mb-4">
        <h1 className="me-auto">Budgets</h1>
        <Button variant="primary">Add Budget</Button>
        <Button variant="outline-primary">Add Expenses</Button>
      </Stack>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fill,minmax(300px,1fr))',
          gap: '1rem',
          alignItems: 'flex-start',
        }}
      >
        <BudgetCard name="Entertainment" gray amount="40" max="1000" />
      </div>
    </Container>
  )
}

export default App

BudgetCard.js

import { Button } from 'react-bootstrap'
import { Card, ProgressBar, Stack } from 'react-bootstrap'
import { currencyFormatter } from '../utils'

export default function BudgetCard({ name, amount, max, gray }) {
  const classNames = []
  if (amount > max) {
    classNames.push('bg-danger', 'bg-opacity-10')
  } else if (gray) {
    classNames.push('bg-light')
  }
  return (
    <Card className={classNames.join(' ')}>
      <Card.Body>
        <Card.Title className="d-flex justify-content-between align-items-baseline mb-3">
          <div className="me-2">{name}</div>
          <div className="d-flex align-items-baseline">
            {currencyFormatter.format(amount)}{' '}
            <span className="text-muted fs-6 ms-1">
              {' '}
              / {currencyFormatter.format(max)}
            </span>
          </div>
        </Card.Title>
        <ProgressBar
          className="rounded-pill"
          variant={getVariant(amount, max)}
          min={0}
          max={max}
          now={amount}
        />
        <Stack direction="horizontal" gap="2" className="mt-4">
          <Button variant="outline-primary" className="ms-auto">
            Add Expenses
          </Button>
          <Button variant="outline-secondary">View Expenses</Button>
        </Stack>
      </Card.Body>
    </Card>
  )
}

function getVariant(amount, max) {
  let ratio = amount / max
  if (ratio < 0.5) return 'primary'
  if (ratio < 0.75) return 'warning'
  return 'danger'
}

这是完整的代码。请找到输出图像以供参考。 pageOutput

请帮我解决这个问题。

Answer 1

尝试使用数字而不是字符串。示例：

<BudgetCard name="Entertainment" gray amount={40} max={1000} />

"40" > "1000" => true
40 > 1000 => false

"bg-danger" 的类名始终应用于卡片，即使条件未得到满足也是如此

className of "bg-danger" is always applied to the Card even if the condition is not getting satisfied

javascript

reactjs

react-bootstrap