React中实现移动端Div隐藏时三元运算符嵌套报错的解决方法咨询

你的问题根源在于JSX语法结构不完整：原代码里第一个三元运算符只返回了<div>的开始标签，没有闭合，而且后续的内容是独立的JSX表达式，这违反了React对JSX的要求——每个表达式必须是完整的闭合元素或片段。另外，重复写内部的条件渲染代码也不够简洁，咱们来一步步修复：

最优解决方案：切换外层div的类名（推荐） #

直接在外层div的className属性中用三元运算符切换类，内部的条件渲染内容正常嵌套在div里，这样既解决语法错误，又保持代码简洁：

<div className={this.state.hidediv ? "livechat" : "livechat2"}>
  {this.state.hidechat ? (
    <>
      <a href="#" className="close" onClick={() => this.hidechat(true)}></a>
      <Livechat id={this.state.liveid} />
    </>
  ) : null}
</div>

为什么这样可行？ #

• 外层div是完整的闭合元素，符合JSX语法规范；
• 通过this.state.hidediv的值直接切换类名，当值为false时，livechat2类的display:none会生效，隐藏整个div及内部内容；
• 内部的条件渲染逻辑保持不变，完美嵌套在外层div中，不会出现结构断裂。

另一种写法：完整嵌套三元（不推荐，代码重复） #

如果你一定要用外层的三元结构包裹整个div，需要把内部内容也重复写在两个分支里（不推荐，因为违反DRY原则）：

{this.state.hidediv ? (
  <div className="livechat">
    {this.state.hidechat ? (
      <>
        <a href="#" className="close" onClick={() => this.hidechat(true)}></a>
        <Livechat id={this.state.liveid} />
      </>
    ) : null}
  </div>
) : (
  <div className="livechat2">
    {this.state.hidechat ? (
      <>
        <a href="#" className="close" onClick={() => this.hidechat(true)}></a>
        <Livechat id={this.state.liveid} />
      </>
    ) : null}
  </div>
)}

这种写法虽然能解决语法错误，但内部代码重复了，后续维护成本更高，所以优先推荐第一种方案。

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