react中details的open状态在ssr/hydration中易丢失，需useeffect手动同步；summary必须为details首个子元素，禁用div/fragment包裹；无ontoggle合成事件，须用原生toggle监听；嵌套details在微信/ios safari中需降级为div+button。
React中直接写details会丢失初始open状态
服务端渲染（SSR）或React Hydration阶段，若details带open属性，但DOM挂载后el.open仍为false，说明React未将该布尔属性同步到DOM property。这不是bug，是React对“反射型属性”（reflected attributes）的处理差异。
实操建议：
- 不要只依赖HTML写
<details open></details>——服务端吐出的open在客户端可能被忽略 - 用
useEffect手动同步：el.open = true，且加!el.hasAttribute('open')兜底判断 - 避免在
render中用open={isOpen}做受控绑定；details天生是非受控元素，强行受控会导致状态漂移
summary被包裹在div或Fragment里导致Safari点击失效
React组件中常见写法：<details><div><summary>标题</summary></div>
<p>内容</p></details>。这违反了HTML规范：summary必须是details的**第一个子元素节点**，而div成了实际首个子节点。
后果：iOS Safari（≤17.4）、旧版Chrome完全不响应点击，键盘Enter/Space也无效。
实操建议：
- 禁止用
div、Fragment、section等任何标签包裹summary - 若需条件渲染，用逻辑运算符：
{showSummary && <summary>标题</summary>}，确保它始终是details的直接子元素 - 检查编译后HTML，确认
<summary></summary>前无空格、换行、注释——JSX中换行会被转为空白文本节点，同样破坏结构
事件监听用onToggle无效，必须用原生toggle事件
React不支持onToggle这个合成事件，写<details ontoggle="{handleToggle}"></details>不会触发。开发者常误绑onClick，但这会漏掉键盘操作（Space/Enter），且在连点时可能重复执行。
实操建议：
- 用
useEffect在挂载后添加原生toggle监听：el.addEventListener('toggle', handler) - 务必清理监听器，避免多次挂载造成重复回调
- 不要在
handler里直接改state再调el.open = ...——用户交互已改变状态，只需读取el.open并同步UI - 如需手风琴效果（单开一栏），遍历同级
details并设child.open = false，别用CSS伪类模拟
嵌套details在微信和iOS Safari中必须降级
React组件里写两层<details><summary>...</summary><details><summary>...</summary></details></details>，在微信Android（X5内核v8.0.4x以下）中整个菜单空白；iOS Safari ≤17.4则出现点击穿透、二级自动收起、toggle事件不触发等问题。
这不是React的问题，是浏览器根本不识别嵌套语义。
实操建议：
- UA检测到
Micromessenger或iOS且webkit版本低，直接渲染div + button + aria-expanded结构 - 禁用
summary内的img或svg——微信会劫持点击，除非显式加pointer-events: none - 降级后，用
button代替summary，并手动同步aria-expanded与内部显隐状态
details，而是确保它在微信、iOS Safari、屏幕阅读器、键盘导航下都保持原生行为一致——任何用div包summary、用display: none控制内容、或绕过open属性的操作，都会悄悄切断这条语义链。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
