三种值的渲染规则：

// ⚠️ 常见的「对象渲染报错」
const user = { name: '张三' };
return 
{user}
;             // ❌ 报错
return 
{user.name}
;         // ✅
return 
{JSON.stringify(user)}
;   // ✅（如果只是想展示）

三、条件渲染的写法

// ① 三元（最常用，适合二选一）
{isLogin ?  : }

// ② 逻辑与（只关心「有或没有」）
{list.length > 0 && }

// ③ 提前 return（组件级条件渲染，可读性最好）
function Page({ loading, data }) {
  if (loading) return ;
  if (!data) return ;
  return ;
}

// ④ 变量提取
let content;
if (loading) content = ;
else if (error) content = ;
else content = ;
return 
{content}
;

// ⑤ 映射表（多分支场景最清晰）
const views = {
  loading: ,
  error: ,
  empty: ,
  success: ,
};
return 
{views[status]}
;

⚠️ && 的 0 陷阱（最高频的 JSX 坑）：

// ❌ count 为 0 时会渲染出「0」
{count && }
// 渲染结果：
0

// 原因：0 是「假值但可渲染」的值 —— React 会把它当作子节点渲染出来
// （而 false / null / undefined / true 会被忽略）

// ✅ 四种修复
{count > 0 && }
{!!count && }
{Boolean(count) && }
{count ?  : null}

四、列表渲染与 key

// 基本写法
{list.map((item) => (
            // ⭐ key 必须在 map 返回的最外层元素上
))}

// ❌ 常见错误：key 加在了内部元素上
{list.map((item) => (
  

            {/* ⚠️ 警告 + 失效 */}
  
))}

// ❌ 用 index 作 key（列表会增删排序时是 bug）
{list.map((item, index) => )}

// ✅ 稳定唯一 ID
{list.map((item) => )}

// 渲染数组的其它写法
// ① 先 map 成数组（推荐）
const items = list.map((x) => 
{x.name}
);
return 
{items}
;

// ② 用 Fragment 包多个兄弟元素
{list.map((item) => (
  
    
{item.term}
    
{item.desc}
  
))}

// ③ 简写形式不能带 key，需要 key 时必须用 
{list.map((item) => (
  {item.name}
))}

key 的深入讨论（为什么不能用 index、原理是什么）见 [4.5 key 的作用与选择](../04-渲染机制与原理/4.5-key的作用与选择.md)。

五、属性（Props）的写法

// ① 字符串字面量用引号（不写引号则是表达式）


// ② 表达式用花括号


// ③ 布尔属性
                    // 等价于 disabled={true}
            // 不生效


// ④ 展开传递（把对象的所有属性传下去）
const props = { id: 'a', className: 'x', onClick: handleClick };


// ⑤ 展开后覆盖（后面的生效）
       // className 被覆盖为 override

// ⑥ 事件用驼峰、函数引用
              // ✅
              // ⚠️ 警告（原生写法，React 不识别）

// ⑦ 自定义属性用 data-* / aria-*

属性名的变化（HTML → JSX）：

六、样式与 className

// ① 内联 style 是对象（属性名用驼峰）


// ② className 拼接

// 或用 clsx / classnames 库


// ③ 条件样式


// ④ CSS 变量

// ⚠️ 常见错误
                    // ❌ 报错：style 需要对象
  // ❌ 应写成 fontSize
                           // ⚠️ 警告：应写 className
          // ✅ 值需要带单位（除无单位属性）

七、语法约束