React的渲染输出不会导致引导程序的内联形式

Question

我使用bootstrap＆＃39; inline-form和React组件时遇到了一个奇怪的问题。

直接在我的渲染输出中使用official doc's page上显示的示例数据时（将class更改为className以及for更改为htmlFor） ：

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

在我的页面中，一切都按预期工作。

当我将相同（重新设定）的代码复制到我的组件的render函数中时，输入之间的填充以某种方式丢失。

事实证明，这个问题与如何呈现html /标记或传递给浏览器有关。从React开始，标记是一个没有任何缩进的单个字符串（可以通过开发工具看到）。

当从bootstrap的官方页面中删除所有缩进（通过dev-tools）时，同样的事情也会发生在那里。

任何人都可以告诉我为什么会发生这种情况，如果有什么我可以做的，例如告诉React缩进输出或什么？

注意：我没有使用Bootstrap 4.它是版本3中的最新版本。

在开发工具中选择form元素的节点时，右键单击 - ＆gt;编辑为HTML，显示如下：

<form class="form-inline"><div class="form-group"><label for="exampleInputName2">Name</label><input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"></div><div class="form-group"><label for="exampleInputEmail2">Email</label><input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com"></div><button type="submit" class="btn btn-default">Send invitation</button></form>

导致问题的是未格式化的，无缩进的字符串。