ReactJS：文本对齐证明不起作用

Question

我一直在使用text-align: justify 来平均分配菜单。遵循此tutorial，它运行良好。

但是，当我使用 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 指令来修复它）。

我在谷歌搜索后只遇到了这个问题：https://github.com/facebook/jsx/issues/19。但我很快就迷路了。

我尝试添加一些额外的内容，例如{'\n'} 和{' '}，但是ReactJS 报告语法错误。

请帮忙。谢谢。

---

更新 1：

按照接受的答案，我的菜单可以在 Chrome 模拟器中使用。但是，当我从 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 layout。这非常容易。一个例子是：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