React-bootstrap 制作一个有标题但没有正文的面板答案

【问题标题】：React-bootstrap make a panel with header and without bodyReact-bootstrap 制作一个有标题但没有正文的面板
【发布时间】：2015-08-13 06:14:53
【问题描述】：

react-bootstrap 库中定义了 <Panel> 元素。如何渲染带有标题而没有正文的面板？

<Panel header="header text"></Panel>

和

<Panel header="header text" />

只给我

<div data-reactid=".0.1.0.0.0.0" class="panel panel-default">
  <div data-reactid=".0.1.0.0.0.0.0" class="panel-heading">header text</div>
  <div data-reactid=".0.1.0.0.0.0.1:$0" class="panel-body"></div>
</div>

如何使用panel-body 类删除不必要的 div？

【问题讨论】：

不，你不能......无论你是否定义正文，react-bootstrap 都会添加该 div
@amit_183 你觉得维护者会考虑 PR 吗？
或者你必须删除行号。 68 在 react-bootstrap 库中..github.com/react-bootstrap/react-bootstrap/blob/master/src/…
这将杀死所有测试 =)
只需自己编写，无需使用 react-bootstrap 中的面板。为此创建您的小组件。

标签： twitter-bootstrap reactjs react-bootstrap

【解决方案1】：

您可以只包含 react-bootstrap 的 css 文件并执行

<div className="panel-heading" > whatever you want to write</div>

【讨论】：

小心放入 react-bootstrap 组件。如果你这样做了，你的 <div class="panel-heading"></div> 实际上最终会出现在你的 <div class="panel-body"></div> 中，这可能不是你想要的！