当显示数字零“0”时，React 组件 CSS 不起作用，但与其他值一起工作正常

Question

我有这个 ChartCard 组件，如果值大于零，它会显示应用于它的设计，但当值为 0 时，它会忽略应用于它的 scss 并适应另一种随机样式。我是 React 的初学者，这就是为什么我不明白问题出在样式还是组件上。 这是 ChartCard 组件：

render() {
const { chartProps, title, amount, percent, successPercent, strokeWidth, showInfo } = this.props

return (
  <div style={{
    minHeight : '110px',
  }}>
    {chartProps && (
      <div className="chartCard__chart">
        {/* <Sparkline {...chartProps} /> */}
        <Progress type="circle" width={100} percent={ percent } successPercent={ successPercent } stokeWidth={ strokeWidth } showInfo={ showInfo }  />
      </div>
    )}
    <div style={{marginTop: '30px', width: '65%'}}>
    {amount && <div className="chartCard__amount">{amount}</div>}
    {title && <div className="chartCard__title">{title}</div>}
    </div>

  </div>
)

Scss 给它：

 .chartCard {
  padding: rem(15) rem(30) rem(20);
  position: relative;
  overflow: hidden;

  &__chart {
    height: 100%;
    width: 100px;
    position: absolute;
    top: 0;
    right: 5px;
  }

  &__amount {
    font-size: rem(36);
    color: $black;
    margin-bottom: rem(-10);
  }

  &__title {
    color: $text;
    text-transform: uppercase;
    font-weight: bold;
  }
}

以及它的使用地点：

 <div>
                <Row gutter={4}>
                  <Col xs={24} lg={12} xl={12}>
                    <ChartCard
                      title="Active Volunteers"
                      amount={volunteer.active_volunteers}
                      successPercent={
                        (volunteer.active_volunteers / volunteer.total_volunteers) * 100
                      }
                    />
                  </Col>
                  <Col xs={24} lg={12} xl={12}>
                    <ChartCard
                      title="Verified Volunteers"
                      amount={volunteer.verified_volunteers}
                      successPercent={
                        (volunteer.verified_volunteers / volunteer.total_volunteers) * 100
                      }
                    />
                  </Col>
                </Row>
              </div>

您可以看到，当值大于 0 时显示样式，但当值为 0 时不显示。

Answer 1

在 ChartCard 组件代码中，我删除了将值 0 视为 false 的 && 符号，它取消了整个设计。

我改变了这个：

<div style={{marginTop: '30px', width: '65%'}}>
{amount && <div className="chartCard__amount">{amount}</div>}
{title && <div className="chartCard__title">{title}</div>}
</div>

到这里：

 <div style={{marginTop: '30px', width: '65%'}}>
{<div className="chartCard__amount">{amount}</div>}
{title && <div className="chartCard__title">{title}</div>}
</div>