Sublime正则替换props需谨慎：直接搜title={.?}会因跨行、嵌套括号、注释等出错；应启用“点匹配换行”，用\s+([a-zA-Z]\w)={(1+?)}(?=\s/?>|\s+2?>)锚定边界，替换为$1={$2}，再转{...props}。{} ↩{ ↩
Sublime 的正则替换能快速把逐个传递的 props 改成展开运算符，但必须手动校验结构、避开 JSX 表达式区域，否则会破坏逻辑。
为什么直接搜 title={.*?} 会出错
JSX 中属性值可能是简单字面量（title="Hello"），也可能是复杂表达式（title={item?.name ?? "N/A"} 或 title={renderTitle()}）。用非贪婪匹配 {.*?} 会跨行截断、吞掉括号嵌套，甚至误匹配注释或字符串里的花括号。
- 错误示例：
title={item.name} author={user && user.id}→ 匹配到{item.name} author={user && user.id}整段，替换后变成...{...}嵌套失效 - JSX 注释
{/* comment */}也会被当成属性值捕获，导致替换污染 - 多行属性（换行缩进）会让
.*?失效，除非显式启用.匹配换行（Sublime 默认不开启）
安全替换的正则写法与边界条件
目标是只匹配「独立、成对、无嵌套干扰」的属性赋值，比如 title={title}、date={blogDate}，不碰 children={...} 或带逻辑运算的表达式。
- 启用 Sublime 的「正则模式」和「点匹配换行」（
.in regex）—— 点击 Find 面板右下角.*图标 - 使用原子组避免回溯爆炸：
(title|author|date|content)=\{([^{}]*?)\}（仅适用于已知固定属性名） - 更通用的写法（推荐）：
\s+([a-zA-Z][\w]*)=\{([^{}]+?)\}(?=\s*\/?>|\s+[^{]*?>)，它靠后面紧跟的/>或>来锚定边界 - 替换为：
$1={$2}先备份原样，再批量改写为...{$1}形式，最后统一替换成{...props}
真正能一键重构的实操路径
别指望单次正则搞定全部。React 属性传递重构本质是「识别意图→提取变量→封装对象→替换调用」，Sublime 只负责中间两步。
- 第一步：用
const blogProps = { title, author, date, content };手动或半自动提取（选中四行 → Ctrl+Shift+P → “Align Assignments” 插件辅助对齐） - 第二步：正则替换所有
title={title}→...{...blogProps}，注意保留原有key、className等非数据属性 - 第三步：检查子组件是否用了
PropTypes或 TypeScript 接口 —— 正则不会帮你改BlogCard.propTypes = { title: ... }，漏掉就 runtime 报错 - 关键陷阱：函数组件里若用
...rest接收，但内部又解构了title，替换后需同步删掉重复解构，否则 ESLint 会报no-unused-vars
最易被忽略的是子组件内部对 props.title 的强依赖 —— 正则只改父组件调用侧，一旦子组件没改成接收 props 对象或解构，运行时就 undefined。重构完务必 grep 搜索子组件里所有 props\. 出现的位置，确认是否适配。
