ReactJS: выравнивание текста не работает

Question

Я использую text-align: justify равномерно распределить меню. После этого урока, и он работает отлично.

Тем не менее, он ломается, когда я использую ReactJS для создания представления. Сравнение можно найти здесь: http://jsfiddle.net/j7pLprza/1/. Я использую эти два простых компонента для заполнения меню:

var MenuItem = React.createClass({
    render: function() {
        return (
            <li>
                {this.props.title}
            </li>
        );
    }
});

var TopMenus = React.createClass({
    render: function() {
        return (
            <div className="break">
            <nav>
                <ul>
                    {this.props.menus.map(function(menu) {
                        return (<MenuItem title={menu.title} />);
                    })}
                </ul>
            </nav>
            </div>
        );
    }
});

После исследования я думаю, что это вызвано ReactJS, который удаляет все разрывы строк и пробелы после <li> Предметы. Это отключит text-align: justify,

Это происходит и с AngularJS (но я могу это исправить, используя add-space-all Директива).

Я достиг только этой проблемы после поиска в Google: https://github.com/facebook/jsx/issues/19. Но я быстро заблудился.

Я попытался добавить дополнительный контент, такой как {'\n'} а также {' '}, но ReactJS сообщает о синтаксических ошибках.

Пожалуйста помоги. Благодарю.

---

ОБНОВЛЕНИЕ 1:

После принятого ответа мои меню работают в Chrome Emulator. Однако, когда я захожу с iPhone 5c (браузер Chrome), результат выглядит так, как будто дополнительное пространство не распознается.

После попытки разных комбинаций, это работает:

var TopMenus = React.createClass({
    render: function() {
        return (
            <div className="break">
            <nav>
                <ul>
                    {this.props.menus.map(function(menu) {
                        return [(<MenuItem title={menu.title} />), '&nbsp; '];
                    })}
                </ul>
            </nav>
            </div>
        );
    }
});

Обратите внимание, что дополнительное место в   является необходимым. Отсутствует либо   или же ломает это.

Это работает тогда на Nexus 7, iPhone 5c (Chrome и Safari). Однако я не знаю точной причины. Если кто знает, помогите пожалуйста.

---

ОБНОВЛЕНИЕ 2:

Все еще глючит. Поэтому я перешел на Flex макет. И это супер легко. Пример: http://jsfiddle.net/j7pLprza/4/

Answer 1

В этом случае React ничего не удаляет, поскольку между элементами нет пробела. Если вы хотите добавить пробелы между элементами li, вы можете чередовать массив с помощью ' ', В этом случае это так же просто, как вернуть массив из .map функция (массивы сплющены):

var TopMenus = React.createClass({
    render: function() {
        return (
            <div className="break">
            <nav>
                <ul>
                    {this.props.menus.map(function(menu) {
                        return [<MenuItem title={menu.title} />, ' '];
                    })}
                </ul>
            </nav>
            </div>
        );
    }
});

Пример: https://jsfiddle.net/j7pLprza/2