问题 React.js与Bootstrap 3的渲染差异

我正在使用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/

8391

2017-08-05 20:04

起源

答案:

我只是猜测这是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文档。

2017-08-05 20:10

您始终可以向react项目提交更改提议以进行此更改。似乎有点凌乱，不得不添加＆nbsp;靠自己。 - Pablo Jomer

这肯定修复了它。这看起来很奇怪，但我认为我需要更好地理解JSX编译。谢谢！ - Chuck M

如果它全部在一条线上，它将保留空间。否则，无法区分故意空间与良好的代码缩进。 {' '} 也适用于添加文字空间或设置 margin-right: 0.3em 在按钮上工作。 - FakeRainBrigand

答案:

我只是猜测这是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文档。

2017-08-05 20:10

您始终可以向react项目提交更改提议以进行此更改。似乎有点凌乱，不得不添加＆nbsp;靠自己。 - Pablo Jomer

这肯定修复了它。这看起来很奇怪，但我认为我需要更好地理解JSX编译。谢谢！ - Chuck M

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

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

2017-08-07 10:37

只需使用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>

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

2017-08-05 20:14

问题 React.js与Bootstrap 3的渲染差异

答案:

答案:

热门问题