React中如何动态用Fragment包裹外层div？条件渲染遇语法错误

嘿，这个问题我熟——你碰到的Unexpected token错误本质是JSX的核心语法规则限制，咱们一步步拆解解决：

错误原因 #

你原代码的写法违反了JSX的基本要求：JSX要求所有标签必须是完整闭合的结构，不能像原生HTML那样拆分标签（比如在三元表达式的一个分支只写开始标签，另一个分支写空，后面再补结束标签）。这种拆分写法会让JSX编译器无法正确解析，直接抛出语法错误。

另外还要提个小细节：React里要使用className代替原生HTML的class，因为class是JavaScript的关键字，直接用会引发额外问题。

正确的解决方案 #

下面给你几种简洁且符合React规范的写法，你可以根据场景选择：

方案1：直接在三元表达式中包含完整结构 #

把需要条件包裹的整个区块作为三元的分支，避免拆分标签：

return (
  <Fragment>
    <div>
      {/* 把true换成你的实际判断条件 */}
      {true ? (
        <div className="imghvr-wrapper">
          <div className="imghvr">
            <div className="imghvr-overlay imghvr-anim-none imghvr-anim-single"></div>
          </div>
        </div>
      ) : (
        <div className="imghvr">
          <div className="imghvr-overlay imghvr-anim-none imghvr-anim-single"></div>
        </div>
      )}
    </div>
  </Fragment>
);

方案2：提取重复内容到变量，减少冗余 #

如果内层内容重复度高，先把重复部分存到变量里，再做条件包裹：

// 提取重复的内层内容
const innerImghvr = (
  <div className="imghvr">
    <div className="imghvr-overlay imghvr-anim-none imghvr-anim-single"></div>
  </div>
);

return (
  <Fragment>
    <div>
      {/* 根据条件决定是否包裹外层div */}
      {true ? <div className="imghvr-wrapper">{innerImghvr}</div> : innerImghvr}
    </div>
  </Fragment>
);

方案3：用变量+条件语句渲染（更易读） #

如果判断逻辑复杂，用变量存储最终要渲染的内容，再通过条件语句修改：

// 初始化基础内容
let content = (
  <div className="imghvr">
    <div className="imghvr-overlay imghvr-anim-none imghvr-anim-single"></div>
  </div>
);

// 根据条件添加外层包裹
if (true) { // 替换成你的实际判断条件
  content = <div className="imghvr-wrapper">{content}</div>;
}

return (
  <Fragment>
    <div>{content}</div>
  </Fragment>
);

关键总结 #

JSX本质是JavaScript的语法糖，会被编译成React.createElement()调用，所以必须遵循JavaScript的语法规则——不能出现不完整的标签结构。所有条件渲染都要围绕“完整组件/元素”来做，而不是拆分标签。

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