React组件字体大小条件失效：JavaScript if语句逻辑与错误排查

我一眼就发现问题的核心了：你传递给FontChooser组件的min、max、size props都是字符串类型，而不是数字！这直接导致你构造函数里的大小比较逻辑完全不符合预期。

为什么会出错？ #

在JavaScript中，字符串的比较是按字符的Unicode编码来的，比如'4'和'30'比较时，会先看第一个字符：'4'的编码比'3'大，所以'4' > '30'会返回true。这就导致你的代码直接进入了else if (this.props.min >= this.props.max)分支，把currmin、currmax、currsize都设成了'4'，和你预期的4、30、16完全不符。

修复步骤 #

1. 先把props转换为数字类型：在构造函数开头，先将所有需要做数值比较的props转换成数字，再进行后续逻辑判断。
2. 优化条件逻辑：调整判断顺序，先处理min小于等于0的情况，确保currmin至少为1，再判断size的范围，让逻辑更清晰。

修改后的构造函数代码 #

class FontChooser extends React.Component {
  constructor(props) {
    super(props);
    // 关键：把props转换成数字类型
    const min = Number(props.min);
    const max = Number(props.max);
    const size = Number(props.size);
    
    let currsize;
    let currmin;
    let currmax;

    // 先处理min<=0的情况，确保最小字号至少为1
    currmin = min <= 0 ? 1 : min;
    currmax = max < currmin ? currmin : max; // 如果max比处理后的min还小，强制max等于min

    // 处理size的范围
    if (size > currmax) {
      currsize = currmax;
    } else if (size < currmin) {
      currsize = currmin;
    } else {
      currsize = size;
    }

    this.state = {
      hidden: true,
      checked: false,
      color: 'black',
      currmax,
      currmin,
      currsize
    };

    // 绑定事件处理函数
    this.handleClick = this.handleClick.bind(this);
    this.handleDoubleClick = this.handleDoubleClick.bind(this);
    this.handleCheck = this.handleCheck.bind(this);
    this.incrementSize = this.incrementSize.bind(this);
    this.decrementSize = this.decrementSize.bind(this);

    console.log(this.state); // 现在应该输出currmax:30, currmin:4, currsize:16了
  }

  // 其他方法和render函数保持不变...
}

额外建议 #

• 你可以在组件中添加props类型校验（比如用PropTypes），确保传入的min、max、size都是数字类型，避免以后再出现类似问题。
• 在事件处理函数中，比如incrementSize和decrementSize，也要确保操作的是数字类型的state值（现在我们已经在构造函数里转换成数字了，所以没问题）。

现在运行代码，控制台应该会输出你预期的currmax:30、currmin:4、currsize:16，组件的字体大小控制逻辑也会正常工作。

内容的提问来源于stack exchange，提问作者E.Mohammed