引入react-bootstrap Accordion组件后页面白屏，报Element type is invalid错误

问题根源 #

你遇到的报错是因为调用了不存在的组件属性导致返回值为undefined，触发React渲染失败，核心原因有两个：

1. 若你安装的是react-bootstrap v1.x版本，该版本的Accordion组件没有嵌套的Accordion.Item、Accordion.Header、Accordion.Body属性，调用不存在的属性自然返回undefined
2. 导入方式不匹配，部分版本的Accordion需要用命名导入而非默认导入

解决步骤 #

• 首先检查当前安装的react-bootstrap版本，终端执行命令：
  npm list react-bootstrap
• 如果版本低于v2.0.0，优先选择升级到最新稳定版：
  npm install react-bootstrap@latest bootstrap@latest
• 修正组件导入语句，将默认导入改为命名导入：

// 把原来的导入语句替换成这个
import { Accordion } from 'react-bootstrap'

• 必须在项目入口文件（一般是src/index.js）顶部引入bootstrap全局样式，否则组件样式会失效：

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

• 如果你不想升级依赖，需要适配v1.x版本的Accordion写法，示例如下：

import React, { Component } from 'react';
import { Accordion, Card, Button } from 'react-bootstrap';

class Collapsible extends Component{
  render() {
    return(
      <section className="container">
        <Accordion defaultActiveKey="0">
          <Card>
            <Card.Header>
              <Accordion.Toggle as={Button} variant="link" eventKey="0">
                Accordion Item #1
              </Accordion.Toggle>
            </Card.Header>
            <Accordion.Collapse eventKey="0">
              <Card.Body>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
                est laborum.
              </Card.Body>
            </Accordion.Collapse>
          </Card>
        </Accordion>
      </section>
    );
  }
}

export default Collapsible;

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