React.js与Bootstrap 3呈现差异

Question

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

基本问题是,如果我使用引导类在直接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中所有空格的效果.似乎我正确地将小空间字符添加到您的小提琴中.

  //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文档中找到更多信息.

Answer 2

尝试在按钮之间使用{''}

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