6

React と Reflux を使用してアプリを構築しており、アイテムのリストを特定の順序でレンダリングしようとしています。

アイテムは、新しい順にレンダリングされるカスタム Post コンポーネントであるため、最新の投稿がリストの一番上に表示されます。

Khan Academy のTimeoutTransitionGroupを使用して、リスト項目をフェードインおよびフェードアウトさせています。

私が見ている問題は、新しい投稿を追加し、コンポーネントが新しい小道具を介して更新されたリストを取得すると、リストの最初の要素ではなく最後の要素で遷移が発生することです。追加された新しいアイテムの位置なので、最初の要素がフェードインするようにしたいと思います。

投稿 2 <- この投稿は新しく追加されました

投稿 1 <- この投稿はフェードインします

アイテムの同じ順序を指定する方法はありますが、それらを逆の順序でレンダリングするか、同様の方法はありますか?

これは私のコンポーネントのレンダリング関数です:

    if (!(this.props.posts && this.props.ordering)) return false;
    var posts = this.props.ordering.map(function(postId, index) {
        return <Post key={index} post={this.props.posts[postId]}/>;
    }, this);
    return (
        <div className="post-collection">
            <TimeoutTransitionGroup 
                enterTimeout={500}
                leaveTimeout={500}  
                transitionName="postTransition">
                {posts}
            </TimeoutTransitionGroup>
        </div>
    );

これは CSS トランジションです。

.postTransition-enter {
    opacity: 0;
    transition: opacity .25s ease-in;
}

.postTransition-enter.postTransition-enter-active {
    opacity: 1;
}

.postTransition-leave {
    opacity: 1;
    transition: opacity .25s ease-in;
}

.postTransition-leave.postTransition-leave-active {
    opacity: 0;
}

どんな助けでも大歓迎です！

4

2 に答える 2

4

同様の問題がありましたが、反応でキーを適切に使用する方法について、最初の問題があったようです。そうは言っても、これは昇順から降順への順序を逆にするために機能しました。

var NotesList = React.createClass({
render: function () {
    var notes = this.props.notepad.notes;

    return (
        <div className="note-list">
            {
                notes.reverse().map(function (note) {
                    return (
                        <NoteSummary key={note.id} note={note}/>
                    );
                })
            }
        </div>
    );
}
});
于 2016-08-09T20:55:49.417 に答える