React中如何通过条件渲染实现表格行的显示与隐藏？

你的代码里有个关键错误：把比较运算符写成了赋值运算符，这直接导致表格行的条件逻辑完全混乱。

问题根源 #

你写的vehicle.type = "car"是赋值操作，不是判断相等。这行代码会把vehicle.type强制改成"car"，而且因为赋值表达式的返回值是"car"（非空字符串在JS里被视为true），所以不管原本车辆类型是什么，这行对应的表格行都会被渲染，同时还会篡改你的vehicle数据，后续逻辑自然全错了。之前在label/input组里看似正常，大概率是组件重新渲染时状态被重置掩盖了问题，但表格里的逻辑因为数据被篡改，就暴露了bug。

修复后的代码 #

把所有的=替换成严格相等比较的===即可，另外包裹<tr>的<Fragment>完全可以去掉（单个元素不需要Fragment包裹）：

return (
  <>
    <h2>Vehicle Details: {vehicle.vehicleId}</h2>

    <table>
      <tbody>
        {vehicle.type === "car" && (
          <tr>
            <th>Car</th>
            <td>{vehicle.reg}</td>
          </tr>
        )}

        {vehicle.type === "truck" && (
          <tr>
            <th>Truck</th>
            <td>{vehicle.reg}</td>
          </tr>
        )}

        <tr>
          <th>Bus</th>
          <td>{vehicle.reg}</td>
        </tr>
      </tbody>
    </table>
  </>
);

可选优化（更简洁的写法） #

如果后续车辆类型增多，建议用对象映射来管理，避免重复的条件判断：

const vehicleRows = {
  car: <tr><th>Car</th><td>{vehicle.reg}</td></tr>,
  truck: <tr><th>Truck</th><td>{vehicle.reg}</td></tr>
};

return (
  <>
    <h2>Vehicle Details: {vehicle.vehicleId}</h2>
    <table>
      <tbody>
        {vehicleRows[vehicle.type]}
        <tr>
          <th>Bus</th>
          <td>{vehicle.reg}</td>
        </tr>
      </tbody>
    </table>
  </>
);

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