如何在 JSX 中有条件地指定 <div> 的结构？答案

【问题标题】：How can I specify the structure of a <div> conditionally in JSX?如何在 JSX 中有条件地指定 <div> 的结构？
【发布时间】：2023-01-19 23:14:30
【问题描述】：

我正在尝试在 React return() 语句中创建响应式 HTML，但每次我转向时，我的代码在 VSCode 中都是错误的。我为此做出的众多努力之一（以及 chatGPT 推荐的）是：

<div>
    {props.platform === "desktop" ? <div className="displaydiv"> : <div>}
    </div>
</div>

在这种情况下，第一个被 VSCode 错误认为没有结束标记。

我不确定这段代码是否会真正运行，即问题是否可能只是过度热情的 VSCode 检查。但即使这是问题是，这对我没有帮助，因为这些错误会掩盖我项目中的真正错误。

【问题讨论】：

【解决方案1】：

不，仅在开始标签上使用三元组是行不通的。您可以将其放在必需的属性上：

<div className={props.platform === "desktop" ? "displaydiv" : ""}>
</div>

【讨论】：