使用react-bootstrap Modal时出现Cannot read property 'Header' of undefined错误

这个坑我之前踩过！出现这个错误的核心原因几乎都是Modal子组件的导入方式不对，给你两种靠谱的修复方案：

方案1：正确导入Modal的子组件 #

如果你的React-Bootstrap是v4及以上版本，Modal的子组件（Header、Title这些）是独立的，不能直接通过Modal.Header访问，得单独导入：

先看你可能出错的导入方式： #

import Modal from 'react-bootstrap/Modal';

这种导入只拿到了根Modal组件，它的原型上并没有Header、Title这些属性，所以才会报"undefined"的错误。

改成下面两种导入方式之一就行： #

方式A：解构导入需要的组件（推荐，按需加载更轻量）

import { Modal, ModalHeader, ModalTitle } from 'react-bootstrap';

然后把你的JSX代码里的嵌套写法改成独立组件：

<Modal show={this.state.modalshow} onHide={close} container={this} aria-labelledby="contained-modal-title">
  <ModalHeader closeButton>
    <ModalTitle id="contained-modal-title">Add User</ModalTitle>
  </ModalHeader>
</Modal>

方式B：导入完整的Modal模块

如果你就想保留<Modal.Header>的写法，可以用通配符导入整个Modal模块：

import * as Modal from 'react-bootstrap/Modal';

这样Modal.Header、Modal.Title就都能正常访问了。

方案2：检查版本兼容性 #

要是你是从React-Bootstrap v3升级过来的，要注意v3里确实支持<Modal.Header>这种嵌套写法，但v4及以后把这些子组件拆成独立的了。你可以去项目的package.json里看看版本：

"react-bootstrap": "^4.0.0" // 或更高版本用方案1的方式

另外别忘了确认已经安装了依赖并引入样式：

npm install react-bootstrap bootstrap

然后在项目入口（比如index.js）里导入bootstrap的CSS：

import 'bootstrap/dist/css/bootstrap.min.css';

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