reactjs - 在ReactJS Prop变更之间平滑过渡

有两个按钮可以切换项目的布局。单击任一按钮时，我希望该项目淡出，更改然后再淡入。

使用ReactJS，我遇到了两个问题:

使用componentDidUpdate触发“淡入”事件会导致循环。不断更改状态会重新触发componentDidUpdate。

使用componentWillReceiveProps使我可以更新元素上的类以使其淡出，但它也可以立即更改布局。我需要将更改延迟到看不见为止。

有什么想法吗？我搞错了吗？

(下面的代码，但是在JSFiddle中可以使用的Stack版本中有些问题:https://jsfiddle.net/nathanziarek/69z2wepo/15009/)

var Hello = React.createClass({
    getInitialState: function() {
    	return { visible: " x-hidden" };
    },
    render: function() {
        return <div className={"hello" + this.state.visible}>Hello {this.props.name}</div>;
    },
    componentDidMount: function(){
    	this.setState({ visible: "" })
    },
    componentWillReceiveProps: function(){
    	// The item is changing, make it invisible
        // Wait until it's done being invisible before changing
        // anything?
    	this.setState({ visible: " x-hidden" })
    },
    componentDidUpdate: function(){
    	// The item has changed, make it visible
        // Setting anything here causes this function
        // to get called again, creating a loop
    	// this.setState({ visible: "" })
    }
});

var Button = React.createClass({
    render: function() {
        return <button onClick={this.handleClick}>{this.props.label}</button>;
    },
    handleClick: function() {
    	React.render(
        	<span>
            	<Button label="Universe"/>
                <Button label="World"/>
                <Hello name={this.props.label} />
            </span>,
            document.getElementById('container')
        );
    }
});

React.render(
    <span>
        <Button label="Universe"/>
        <Button label="World"/>
        <Hello name="_______" />
    </span>,
    document.getElementById('container')
);

.hello {
    opacity: 1;
    transition: 300ms opacity linear;
    -webkit-transition: 300ms opacity linear;
}

.x-hidden { opacity: 0 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>

<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

最佳答案

我会研究使用React的 CSSTransitionGroup 附加组件。您将不得不进行一些重组，但这将为您提供所需的行为，而无需在设置CSS类周围添加大量逻辑。 React将负责为进入/离开DOM的组件设置动画(在您的情况下为淡入淡出)。

不相关:我也避免像在按钮单击事件中那样重新渲染整个组件。这打断了React的流程，将不可避免地引起问题。更喜欢改变状态并推倒新的 Prop 。

关于reactjs - 在ReactJS Prop变更之间平滑过渡，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32315997/