react-bootstrap报错Media is undefined Media.Body访问异常解决

TypeError: react_bootstrap__WEBPACK_IMPORTED_MODULE_2__.Media is undefined 是因为 React Bootstrap 2.0及以上版本已经彻底移除了内置的Media组件，你导入的Media实际值为undefined，自然无法读取其挂载的Body属性。

不需要额外安装依赖，使用React Bootstrap自带的Flex工具类即可实现和旧版Media组件完全一致的布局效果，步骤如下：

1. 修改导入语句，删除不存在的Media导入：

import {  Row, Col, Image, Card } from "react-bootstrap";

2. 将原有Media相关的JSX代码替换为Flex实现版本：

<div className="d-flex mb-4 admin-intro">
  <Image
    roundedCircle
    width={64}
    height={64}
    className="mr-3"
    src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460__340.png"
    alt="Generic placeholder"
  />
  <div className="flex-grow-1">
    <h5 className="font-weight-bold mb-0">Hello Friends,</h5>
    <p className="welcome-text">
      My name is 填写你的真实姓名 and I am a freelance developer. This is my blog page.
    </p>
  </div>
</div>

写法对应说明：

• 原<Media>根节点对应添加了d-flex类的div，实现横向弹性布局
• 原<Media.Body>对应添加了flex-grow-1类的div，会自动占满图片之外的剩余宽度，渲染效果和旧版组件完全一致
• 仅React Bootstrap 1.x版本保留了内置Media组件，2.0+版本官方统一推荐使用Flex工具类实现同类布局。

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