5

text-align: justifyメニューを均等に配布するために使用しています。このチュートリアルに従うと、完全に機能しています。

ただし、ReactJS を使用してビューを作成すると壊れます。比較はhttp://jsfiddle.net/j7pLprza/1/にあります。これらの 2 つの単純なコンポーネントを使用して、メニューにデータを入力します。

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

の余分なスペースが必要であることに注意してください&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 に答える