React使用React-Bootstrap Panel.Body触发toUpperCase未定义错误解决方案

问题原因 #

你当前使用的React-Bootstrap版本低于v1.0，该版本区间的Panel组件未提供Body子属性，调用Panel.Body时返回值为undefined，框架内部处理组件名称时调用toUpperCase方法触发类型报错。

修复方案 #

可二选一执行：

• 方案1：升级React-Bootstrap到v1.x及以上版本，适配新版本API规则即可保留Panel.Body写法。
• 方案2：保持当前版本不变，删除Panel.Body标签，将collapsible属性迁移到Panel标签上即可，修改后代码如下：

<Panel className="groups-items-panel" expanded={this.state[panelName]} collapsible>
    <ListGroupItem>Apple</ListGroupItem>
    <ListGroupItem>Pear</ListGroupItem>
</Panel>

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