Question

我创建了ReactJS应用程序，我想在其中标记每个配置文件的最大（绿色）和最小（红色）技能值。
具有值的每个跨度具有初始类别＆＃34;技能值＆＃34; 当我定义最大值和最小值时，我添加＆＃34;红色＆＃34;和＆＃34;绿色＆＃34;具有最大值和最小值的跨度类我的代码有效，但是对于不等于max或min的值，类＆＃34; null＆＃34;被添加。如果我不返回null，则显示＆＃34; undefined＆＃34;。

如何改进我的代码，以便所有其他值（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 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

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

2 个答案: