React中如何根据API获取的值动态修改信号点className切换颜色

实现方案 #

完全可以实现，你只需要封装一个通用的数值判断函数，根据传入的数值返回对应的信号点类名，分别绑定给空气质量、噪音对应的span元素即可。

核心修改点 #

• 封装getSignalClass工具函数，处理数值类型转换和边界判断，复用在两个指标的类名计算上
• 移除原来写死的signal变量，在渲染对应指标时动态计算类名
• 补充map循环的key属性，避免React控制台警告

修改后的完整代码 #

import PropTypes from 'prop-types';

StatusCard.propTypes = {
  values: PropTypes.array,
  icon: PropTypes.string,
  area: PropTypes.string
};

StatusCard.defaultProps = {
  values: [],
  icon: '',
  area: ''
}

function StatusCard(props) {
  const { values } = props;

  // 通用的信号点类名判断函数
  const getSignalClass = (num) => {
    // 先转成数字，避免API返回字符串导致判断错误
    const value = Number(num);
    if (value <= 50) return 'dot-good';
    if (value <= 100) return 'dot-moderate';
    return 'dot-unhealthy';
  }

  return (
    <div>
      {/* 如有唯一业务id优先用业务id当key，此处临时用index做演示 */}
      {values.map((value, index) => (
        <div className='status-card' key={index}>
          <div className="status-card__info">
            <h4><i className={props.icon}></i> {props.area}</h4>
            <h5>Air Quality: {value.field3} AQI <span className={getSignalClass(value.field3)}></span></h5>
            <br />
            <h5>Noise Level: {value.field4} dB <span className={getSignalClass(value.field4)}></span></h5>
          </div>
        </div>
      ))}
    </div>
  );
}

export default StatusCard

CSS优化建议 #

你当前的CSS有大量重复代码，可以抽离公共样式减少冗余：

/* 公共样式 */
.dot-good, .dot-moderate, .dot-unhealthy {
  height: 9px;
  width: 9px;
  border-radius: 50%;
  display: inline-block;
}
/* 单独定义不同状态的背景色 */
.dot-good {
  background-color: lime;
}
.dot-moderate {
  background-color: yellow;
}
.dot-unhealthy {
  /* 你需求要求>100显示红色，当前原始代码是橙色，需要的话可以改成#ff0000 */
  background-color: red;
}

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