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

ReactJS：text-align证明不起作用

1 个答案: