javascript - 如何在 reactjs 中从状态渲染新元​​素时创建 slider 效果？

Question

当通过从数组中选择切片来切换数据、将其置于状态并通过 setInterval 进行渲染时，我尝试通过单击向上和向下箭头来创建 slider 效果:

更新开始

我终于能够使用此代码笔中的技术创建 slider : http://codepen.io/sergiodxa/pen/aOYdeN

更新结束

var MainContainer = React.createClass({
    getInitialState: function () {
        return {
            position: 0,
            max_elements: 3,
            data: [],
            source: Array.prototype.slice.call([1, 2, 3, 4, 5, 6, 7]).reverse()
        }
    },
    componentDidMount: function () {
        setInterval(this.updateState, 10);
    },
    arrowUp: function () {
        if (this.state.position > 0) {
            this.state.position--;
            this.updateState();
        }

    },
    arrowDown: function () {
        if (this.state.source.length - this.state.position > this.state.max_elements) {
            this.state.position++;
            this.updateState();
        }

    },
    updateState: function () {

        data = this.state.source.slice(this.state.position, this.state.position + this.state.max_elements)
        this.setState({data: data});
        console.log(this.state.data);
    },

    render: function () {
        var Items = this.state.data.map(function (item, i) {
            return (
                <div key={i}>
                    <SimpleItem message={item} active={i == 0 ? true : false}/>
                </div>
            );
        }, this);

        return (
            <div>
                {Items}
                <ArrowUp onClick={this.arrowUp}/>
                <ArrowDown onClick={this.arrowDown}/>
            </div>
        );
    }
});

var ArrowUp = React.createClass({
    render: function () {
        return (
            <a href="#" className="glyphicon glyphicon-arrow-up" onClick={this.props.onClick}>
            </a>
        );
    }
});

var ArrowDown = React.createClass({
    render: function () {
        return (
            <a href="#" className="glyphicon glyphicon-arrow-down" onClick={this.props.onClick}>
            </a>
        );
    }
});

var SimpleItem = React.createClass({
    render: function () {
        var className = "well well-lg"
        var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
        className = this.props.active ? className + " active" : className;
        return (
            <ReactCSSTransitionGroup
                transitionName="example"
                transitionAppear={true} transitionAppearTimeout={500}
                transitionEnter={false} transitionLeave={false}
            >
                <div className={className}>
                    {this.props.message}
                </div>
            </ReactCSSTransitionGroup>
        );
    }

});
ReactDOM.render(<MainContainer />, document.getElementById('container'));

动画仅在组件第一次渲染时可见，出于某种原因，重新渲染的元素不会动画。

我的风格是:

.example-appear {
    opacity: 0.01;
}

.example-appear.example-appear-active {
    opacity: 1;
    transition: opacity 500ms ease-in;
}

我不是前端人员，所以任何提示或链接都将不胜感激。

Answer 1

我注意到一些错误。这首先是在你的 arrowUp 和 down 函数中。始终需要使用 setState() 函数设置状态。来自文档:

NEVER mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

第二件事是 ReactTransition 组的 child 必须有一个唯一的键。当此键发生变化时，这就是告诉 react 过渡组进行动画处理的原因。

<ReactCSSTransitionGroup
  transitionName="example"
  transitionAppear={true} transitionAppearTimeout={500}
  transitionEnter={false} transitionLeave={false}
  >
    {*/ This div needs a key. When the key changes react transition group animates. /*}
    <div key={this.state.currentItem} className={className}>
        {this.props.message}
    </div>
</ReactCSSTransitionGroup>

在上面的示例中，我将键设置为 this.state.currentItem 您的向上和向下箭头功能将适本地更新 state.currentItem，react 将重新渲染组件， react 过渡组会动画，因为 this.state.currentItem 改变了。