如何防止在 if 语句中将 Null 添加到 className

Question

我创建了 ReactJS 应用程序，我想在其中标记每个配置文件的最大（绿色）和最小（红色）技能值。
每个带值的跨度都有一个初始类“技能值”。
当我定义最大值和最小值时，我为具有最大值和最小值的跨度添加“红色”和“绿色”类。
我的代码有效，但对于不等于最大值或最小值的值，添加了“null”类。如果我不返回 null，则显示“未定义”。

如何改进我的代码，使所有其他值（除了 min 和 max）只有初始类？

let skillset = { a: 4, b: 2, c: 2, d: 6 }

class Main extends React.Component {
  render() {
    let arr = Object.values(this.props.skillset)
    let minVal = Math.min(...arr)
    let maxVal = Math.max(...arr)

    const checkVal = (val) => {
      if (val === maxVal) { return 'green' }
      if (val === minVal) { return 'red' }
      return null
    }
    return (
      {
        Object.keys(this.props.skillset).map((skill) => {
          return (
            <div className='skill' key={skill}>
              <span className={`skill-values ${checkVal(this.props.skillset[skill])}`}>
                {this.props.skillset[skill]}</span>
            </div>
          )
        })
      }
    )
  }
}

Answer 1

您可以过滤和连接它们：

const classList = (...list) => list.filter(v => v).join(' ');
...

render() {
  const { skillset } = this.props;
  ...
  const checkVal = (val) => (
    (val === maxVal && 'green') ||
    (val === minVal && 'red')
  );
  ...
  return (
    ...
      <span className={classList('skill-values', checkVal(skillset[skill]))}>

Answer 2

返回一个空字符串''。

const checkVal = (val) => {
  if (val === maxVal) { return 'green' }
  if (val === minVal) { return 'red' }
  return ''
}