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

Question

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

如何改进我的代码，使所有其他值（最小值和最大值除外）只有初始值 class？

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

Return 空字符串 ''。

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

Answer 2

您可以过滤并连接它们：

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]))}>

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

How to prevent to add Null to className in if-statement

reactjs

if-statement

jsx

classname

react-dom

如何改进我的代码，使所有其他值（最小值和最大值除外）只有初始值 class？