时间戳

首页 > 解决方案 > React 的渲染输出无意导致引导程序的内联表单出现问题

html - React 的渲染输出无意导致引导程序的内联表单出现问题

问题描述

我在使用bootstrap'sinline-form和一个React组件时遇到了一个奇怪的问题。

当直接在我呈现的输出中使用官方文档页面上显示的示例数据时（更改class为className和）：forhtmlFor

<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/markup 如何呈现或传递给浏览器有关。从 开始React，标记是一个没有任何缩进的字符串（可以通过开发工具看到）。

从引导程序的官方页面中删除所有缩进（通过开发工具）时，同样的事情也会发生在那里。

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

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

form在 dev-tools 中选择元素的节点时，右键单击 -> Edit as 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>

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

标签： htmlcsstwitter-bootstrapreactjstwitter-bootstrap-3

解决方案

推荐阅读