如何在JSX中条件定义<div>结构？React代码VSCode报错排查

我明白你遇到的困扰了——这种报错可不是VSCode的过度检测，你的代码确实违反了React JSX的语法规则，而且就算强行运行，React也会抛出错误。

问题根源 #

在JSX中，任何条件渲染的分支都必须是完整的、正确闭合的JSX元素。你当前的写法里，三元运算符的两个分支只写了起始标签<div className="displaydiv">和<div>，却没有对应的闭合标签，这直接破坏了JSX的结构完整性，编辑器和React都会判定这是语法错误。

正确的写法 #

你可以通过两种方式修复这个问题：

方式1：完整编写每个分支的JSX元素

把每个分支的div标签完整闭合，同时用括号包裹分支内容（提升可读性）：

<div>
  {props.platform === "desktop" ? (
    <div className="displaydiv">
      {/* 这里放置你的内容 */}
    </div>
  ) : (
    <div>
      {/* 这里放置你的内容 */}
    </div>
  )}
</div>

方式2：动态绑定className（更简洁）

既然两个分支只有className不同，完全不需要写两个div，直接在同一个div的className属性里做判断即可：

<div>
  <div className={props.platform === "desktop" ? "displaydiv" : ""}>
    {/* 这里放置你的内容 */}
  </div>
</div>

如果默认状态下不需要任何className，还可以简化成：

<div>
  <div className={props.platform === "desktop" && "displaydiv"}>
    {/* 这里放置你的内容 */}
  </div>
</div>

额外说明 #

这两种写法都能解决编辑器的报错，同时符合React的语法规范，实际运行也不会有问题。之前的写法因为JSX元素未正确闭合，无论编辑器还是React本身都会识别为错误，并不是编辑器的误判哦。

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