React-Bootstrap和Panel.Body

Question

我刚接触React，也许我错过了什么，但是我想要使用react-bootstrap中的Panel组件。 我正在按照文档进行操作，但出现了以下行为。

这段代码可以正常工作：

import { Panel } from 'react-bootstrap';

(...)

return ( # This is inside my component's render()
    <Panel>
        Foo
    </Panel>
)

这段代码无法运行：

import { Panel } from 'react-bootstrap';

(...)

return ( # This is inside my component's render()
    <Panel>
        <Panel.Body>Foo</Panel.Body>
    </Panel>
)

错误信息显示：未捕获错误：元素类型无效：预期为字符串（用于内置组件）或类/函数（用于复合组件），但却是undefined。您可能忘记从定义组件的文件中导出组件。请检查（ComponentName）的渲染方法。

我做错了什么？非常感谢！

React版本为15.6.2，react-bootstrap版本为0.31.5。

- petr

---

面板#已被移除，用卡片组件替换 https://react-bootstrap.netlify.com/migrating/#panel - Bassam Hajar

Answer 1

请更改为：
import Panel from 'react-bootstrap/lib/Panel'

从react-bootstrap导入组件时，需要从lib文件夹中导入组件。

- Nir Ben-Yair

---

@petr，它需要工作。请看这个链接：https://codesandbox.io/s/1y347ozjl7 - Nir Ben-Yair

非常感谢您的澄清。我们使用的是0.31.5版本，而您使用的是0.32版本，这让我找到了问题的原因。显然，react-bootstrap的API在这些版本之间发生了变化。谢谢！ - petr

有没有办法调试这个问题？我正在使用v0.32.4版本，但仍然遇到了这个问题。我真的无法弄清楚为什么会发生这种情况。我已经尝试按照答案中提到的导入组件的方法。想知道是否可能与我正在使用的另一个库存在一些互操作性问题。如果能得到任何帮助，将不胜感激，因为我真的找不到很多关于它的资源，而且我还没有准备好在github项目上开启一个问题。谢谢！ - dst3p

Answer 2

我在将react-bootstrap版本从'0.30.7'更新到'0.32.4'时遇到了同样的问题。

- Rajan Chauhan