Reflection: JSX Template Ternary Nesting Syntax Error

Date: 2026-06-05 | Severity: P0 | Recurrence: 1

Context

Frontend Builder Agent (SF-03) — fallback page 模板中的三元表达式产生了语法错误。模板生成代码如 {loading ? {<Spinner />} : {<div>No data</div>}}。

Root Cause

生成器模板中 JSX 三元表达式嵌套了多余的 {}。模板本身输出 { 字符，内嵌的 JSX 也带 { — 双层花括号导致 React 解析失败。

Incorrect output pattern: {condition ? {<JSX />} : {<AnotherJSX />}} Correct: {condition ? <JSX /> : <AnotherJSX />} 或 {condition ? (<JSX />) : null}

Fix

Fixed template to not wrap JSX branches in extra {}. The outer {} (JSX expression) already handles one level; inner JSX elements don't get re-wrapped.

Pattern Class

Template Code Generation Syntax — 代码生成器的模板本身使用目标语言语法时，转义/嵌套层次需仔细处理。

Future Trigger

Any code generator that outputs JSX/TSX
Any template-based code generation
Any string-template code with nested braces/quotes

Checklist

生成器模板验证：输出后立即 tsc --noEmit 检查语法
JSX 三元表达式：禁止 {cond ? {<X />} : {<Y />}} 模式
模板中使用 ``` 或字符串拼接替代包含反引号的模板字面量
Benchmark smoke test 覆盖所有生成项目的 build

1.4 KiB Raw Blame History