5

我一直在使用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指令来修复它）。

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

我尝试添加一些额外的内容，例如{'\n'}and {' '}，但是 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>
        );
    }
});

请注意，额外的空间&nbsp;是必要的。丢失&nbsp;或破坏它。

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

更新 2：

还是马车。所以我切换到Flex 布局。这非常容易。一个例子是：http: //jsfiddle.net/j7pLprza/4/

4

1 回答 1

9

在这种情况下，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

于 2015-04-16T10:25:26.710 回答