引入新React组件编译成功但无法渲染问题排查与解决

最近我踩了一个坑，折腾了好一阵子才解决，在这里分享给大家：

我在一个依赖React、Redux、ESLint、PropTypes的项目里开发，现有页面通过import Component from './Component.js';引入组件，在render里通过状态判断渲染都完全正常。但当我引入自己创建的、依赖React-Bootstrap（Button、Modal）、React、PropTypes的PureComponent时，代码编译成功了，页面却死活不渲染这个组件——哪怕我把组件改成仅返回一个简单<div>测试内容</div>的最简结构，还是没用。

排查过程 #

一开始我以为是自己的组件写法出了问题：

• 检查了PureComponent的使用是否合规，有没有遗漏生命周期或状态处理逻辑
• 确认父组件的状态判断逻辑没问题，确实满足组件的渲染条件
• 甚至把组件改成普通的Function Component试了试，结果还是一样不渲染

直到我去翻了react-bootstrap的官方说明，再对比node_modules里的文件，才找到问题根源！

解决方法 #

原来react-bootstrap的Modal组件已经被废弃了——虽然项目的node_modules里还保留着react-bootstrap依赖包，通过import { Modal } from 'react-bootstrap'引入也不会触发编译报错，但实际上对应的Modal实现文件已经迁移到了react-modal这个独立库中。这就导致代码看似能正常编译，但运行时找不到真正的Modal组件实现，进而隐性阻断了整个自定义组件的渲染（哪怕组件本身改成了最简结构，只要引入了这个无效的Modal，就会引发隐性错误）。

解决步骤很清晰：

1. 安装react-modal依赖：npm install react-modal 或者 yarn add react-modal
2. 修改自定义组件里的引入代码，把原来的：

   import { Button, Modal } from 'react-bootstrap';
   

   拆分成：

   import { Button } from 'react-bootstrap';
   import Modal from 'react-modal';
   

3. 按照react-modal的文档调整Modal的使用方式（它的props和原react-bootstrap的Modal存在一些差异）

做完这些之后，我的自定义组件就正常渲染了，哪怕是最简的Div结构也能正常显示出来。

内容的提问来源于stack exchange，提问作者Bfraz