React中ChartCard组件数值为0时SCSS样式失效 其他数值展示正常

问题根因 #

• amount渲染判断逻辑错误：JavaScript 中数值0属于假值，现有{amount && <div className="chartCard__amount">{amount}</div>}的写法在amount为0时会直接跳过该元素渲染，导致下方标题布局偏移，表现为样式失效。
• ChartCard 组件最外层容器未添加chartCard类名：你编写的所有 SCSS 样式都是基于.chartCard的派生选择器，缺少父类名会导致所有样式无法正确匹配。
• 组件调用时未传入chartProps属性：进度条区域的渲染判断{chartProps && ...}永远为假，环形进度条不会渲染。

修复方案 #

1. 调整组件代码，补充类名并修改amount判断逻辑：

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

  return (
    // 补充chartCard类名，让SCSS样式生效
    <div className="chartCard" style={{
      minHeight : '110px',
    }}>
      {chartProps && (
        <div className="chartCard__chart">
          <Progress type="circle" width={100} percent={ percent } successPercent={ successPercent } stokeWidth={ strokeWidth } showInfo={ showInfo }  />
        </div>
      )}
      <div style={{marginTop: '30px', width: '65%'}}>
      {/* 修改判断逻辑，仅在amount为undefined/null时不渲染，兼容0值 */}
      {amount != null && <div className="chartCard__amount">{amount}</div>}
      {title && <div className="chartCard__title">{title}</div>}
      </div>

    </div>
  )
}

2. 若需要显示环形进度条，调用组件时补充传入chartProps和percent参数即可。

内容的提问来源于stack exchange，提问作者Faizan Ahmad