twitter-bootstrap - React.js 渲染与 Bootstrap 3 的差异

Question

我正在使用 React.js 和 Bootstrap 3，并且发现了一个奇怪的渲染问题。

基本问题是，如果我使用 Bootstrap 类以直接 HTML 形式显示表单，它看起来是正确的。但是，如果我从 React 组件中返回相同的标记，则控件之间会缺少间距，并且它们都会接触。这两个版本之间的唯一区别是 JSX 中的“class”被替换为“className”。

我整理了一个小样本来展示这个问题。

HTML

<div class="container">
    <h3>In Raw HTML</h3>
    <form class="form-inline" role="form">
        <div class="form-group">
            <label class="sr-only">Field 1</label>
            <input class="form-control" placeholder="Field 1" />
        </div>
        <div class="form-group">
            <label class="sr-only">Field 2</label>
            <input class="form-control" placeholder="Field 2" />
        </div>
        <button type="submit" class="btn btn-primary">Apply</button>
        <button type="button" class="btn">Reset</button>
    </form>   
    <h3>In React Component</h3>
    <div id="container"></div>
</div>

Javascript

/** @jsx React.DOM */

var App = React.createClass({
    render: function() {
        return (
        <form className="form-inline" role="form">
            <div className="form-group">
                <label className="sr-only">Field 1</label>
                <input className="form-control" placeholder="Field 1" />
            </div>
            <div className="form-group">
                <label className="sr-only">Field 2</label>
                <input className="form-control" placeholder="Field 2" />
            </div>
            <button type="submit" className="btn btn-primary">Apply</button>
            <button type="button" className="btn">Reset</button>
        </form>
        );
    }
});

我将此代码放入 JSFiddle 中，它显示了问题:

http://jsfiddle.net/TerrapinM/p75TH/

Answer 1

我只是猜测这是 React 删除发送给它的 html 中所有空白的效果。看来我是对的，在你的 fiddle 中添加空格字符是有效的。

  //space

http://jsfiddle.net/p75TH/12/

您还可以使用类按钮工具栏添加一个额外的 div，如下所示

<div className="btn-toolbar">
  <button type="submit" className="btn btn-primary">Apply</button>
  <button type="button" className="btn">Reset</button>
</div>

http://jsfiddle.net/p75TH/13/

更多信息可以在Bootstrap docs中找到.