让你的React代码像医生检查病人一样，没问题

📌 项目地址：millionco/react-doctor | ⭐ 10,083 颗星 | 🔧 TypeScript | 📜 未标注

动态组件名写错导致白屏，这问题比想象中更常见。

低代码渲染器或者JSON配置渲染组件时，代码通常是这样的：

const Component = components[name]; // name 是字符串

后端接口返回 "Heder"、" Header" 或者 "header"，components[name] 拿到 undefined。JSX 里渲染 undefined 不会报错，页面直接白屏。人工 review 字符串内容，几百个配置项逐字符检查，不现实。

react-doctor 就是干这个的：扫描 .tsx / .jsx 文件，找出所有用字符串字面量当作组件名的地方，输出行号、列号，格式和 ESLint 一样。项目仓库 millionco/react-doctor，TypeScript 编写，目前 10083 个 star。

安装和运行

npm install --save-dev react-doctor

package.json 加个脚本：

{
  "scripts": {
    "react-doctor": "react-doctor"
  }
}

执行：

npm run react-doctor

输出长这样：

src/components/DynamicRenderer.tsx:12:5  error  no-string-component  Component name should not be a string

点击路径可以直接跳转到对应行，不用额外装 VSCode 插件。

第一次扫可能会报很多警告。比如你有一个常量映射表：

const components = { Header, Footer };

key 是写死的，不会拼错，可以直接关掉规则。项目根目录新建 .reactdoctorrc.json：

{
  "rules": {
    "no-string-component": "off"
  }
}

再跑一次，误报消失。这个配置文件我建议加进 .gitignore，免得影响 CI 环境。

把 react-doctor 放到 lint 后面跑：

npm run lint && npm run react-doctor

扫描速度很快，我试过一个几百文件的仓库，几秒就跑完了。这样任何提交里出现字符串拼接组件名的情况，本地就被拦住，不会等到上线才发现白屏。

跑一次扫描，花几分钟配一下，省下来的排查时间能抵好几轮 Code Review。