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>项后的所有换行符和white-space都去掉了。这将禁用 text-align: justify。

它也发生在 AngularJS 上（但我可以使用 add-space-all 指令修复它）。

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

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

请帮忙。谢谢。

更新 1：

根据接受的答案，我的菜单在 Chrome 模拟器中工作。但是，当我从 iPhone 5c（Chrome 浏览器）访问时，结果好像无法识别额外的 space。

尝试不同的组合后，这个有效：

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>
        );
    }
});

请注意 中额外的space是必须的。缺少   或会破坏它。

它可以在 Nexus 7、iPhone 5c（Chrome 和 Safari）上运行。但是，我不知道确切的原因。有知道的请帮忙

更新 2：

仍然有问题。所以我切换到 Flex layout. And it is super easy. An example is: 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

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

ReactJS: text-align justify not working

javascript

css

text-justify

reactjs