React中使用select标签切换组件渲染异常问题求助

问题根源 #

问题出在字符串"false"的真值判断：HTML select的option值默认都是字符串类型，当你选择"Jerry"选项时，value被设置为字符串"false"，而在JavaScript中，所有非空字符串都会被判定为真值，所以if(value)的条件依然成立，导致始终返回<Zeff />组件。

修复方案（两种可选） #

方案一：修改判断逻辑，精确匹配字符串

直接在Choice组件里判断字符串值，避免真值判断的歧义：

const Choice = () => {
  if (value === "true") { // 明确判断是否为字符串"true"
    return <Zeff />;
  } else {
    return <Jerry />;
  }
};

方案二：将状态转换为布尔类型

在onChange事件中把字符串值转为布尔值，让状态变量成为真正的true/false，原判断逻辑可保留：

<select 
  onChange={(e) => {setMyValue(e.target.value === "true")}} 
  className="form-select" // React中需用className替代原生的class属性
  aria-label="Default select example"
>
  <option value="false">Jerry</option>
  <option value="true">Zeff</option>
</select>

额外代码优化提示 #

• 原代码最外层return里多了一个多余的</div>，需要删除，避免DOM结构错误。
• React中元素的类名属性必须用className，不能用原生的class，否则会触发控制台警告。

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