React.js 与 Bootstrap 3 的渲染差异答案

【问题标题】：React.js rendering differences with Bootstrap 3React.js 与 Bootstrap 3 的渲染差异
【发布时间】：2014-09-28 14:51:53
【问题描述】：

我在使用带有 Bootstrap 3 的 React.js 时发现了一个奇怪的渲染问题。

基本问题是，如果我以带有引导类的纯 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/

【问题讨论】：

标签： twitter-bootstrap reactjs

【解决方案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找到。

【讨论】：

您可以随时向 react 项目提交更改提案以进行此更改。必须添加似乎有点混乱靠自己。
这绝对解决了它。看起来确实很奇怪，但我认为我需要更好地理解 JSX 编译。谢谢！
如果都在一行，它会保留空格。否则就不可能区分有意的空格和好的代码缩进。 {' '} 也可以添加文字空间，或者在按钮上设置margin-right: 0.3em 也可以。

【解决方案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>
        );
    }
});

【讨论】：

【解决方案3】：

只需将 react.js 中的两个按钮用一个 className 为 btn-toolbar 的 div 包装即可。

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

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

【讨论】：