React中如何在HTML元素属性部分正确使用&&运算符

报错原因 #

你的写法不符合JSX语法规范：JSX标签内部，大括号{}只能作为单个属性的值的占位符，不能用来动态决定要不要渲染一整个「属性名=属性值」结构。你写的{obj["name"][0] && id="feature-border"}没有指定对应的属性名，直接把逻辑语句放在了属性定义的位置，解析阶段就会直接抛出语法错误。

正确实现方案 #

• 单属性场景：直接给目标属性传条件值
  React遇到属性值为undefined/null时，会自动跳过该属性的渲染，不会把属性挂到最终生成的DOM上。建议搭配可选链?.做安全访问，避免obj.name不存在、name为空数组时抛出属性访问错误：

  <div 
    id={obj.name?.[0] ? "feature-border" : undefined}
    className="rectangle"
  >
  </div>
  

  注意不要直接写id={obj.name?.[0] && "feature-border"}：如果obj.name[0]是0、空字符串这类合法假值，&&会直接把这个假值作为id的属性值，最终渲染出id="0"这类不符合预期的DOM属性，用三元表达式明确返回undefined可以完全规避这个问题。

• 多属性场景：动态属性对象展开
  如果需要根据同个条件批量添加多个属性，可以把动态属性封装到普通对象里，用展开运算符...做属性注入，条件不成立时展开空对象即可，不会添加多余属性：

  <div
    className="rectangle"
    {...(obj.name?.[0] ? { id: "feature-border", "data-feature": "active" } : {})}
  >
  </div>
  

  这种写法不需要给每个动态属性单独写判断逻辑，多属性场景下代码更简洁。

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