React.js демонстрирует различия с Bootstrap 3

Я использую React.js с Bootstrap 3 и вижу проблему с нечетным изображением.

Основная проблема заключается в том, что если я показываю форму в прямом HTML с классами начальной загрузки, она выглядит правильно. Однако, если я возвращаю одну и ту же разметку из компонента React, промежуток между элементами управления отсутствует, и все они касаются друг друга. Единственная разница между этими двумя версиями заключается в том, что "класс" заменяется на "className" в JSX.

Я собрал небольшой образец, чтобы показать проблему.

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/

Ответ 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/

Более подробную информацию можно найти в Документах по загрузке.

Ответ 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

Просто оберните две кнопки в файле response.js с помощью div с именем класса btn-toolbar.

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

Кроме того, вы можете просто добавить пространство между ними для работы, если вам не нужен дополнительный класс начальной загрузки.