Question

我正在使用React.js和Bootstrap 3，我看到一个奇怪的渲染问题。

基本问题是，如果我使用引导类在直接HTML中显示表单，它看起来是正确的。但是，如果我从React组件中返回相同的标记，则控件之间缺少间距，它们都在触摸。两个版本之间的唯一区别是“类”在JSX中被“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中所有空格的效果。似乎我正确地将小空间字符添加到您的小提琴中。

&nbsp; //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找到更多信息。

Answer 2

尝试使用{＆＃39;按钮之间的

}

/** @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>
        );
    }
});

Answer 3

使用带有className为btn-toolbar的div包装react.js中的两个按钮。

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

如果你不想要一个额外的引导类，你可以在它们之间添加一个空格。

React.js与Bootstrap 3呈现差异

3 个答案: