栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

ReactTransitionGroup挂钩中的回调是什么?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

ReactTransitionGroup挂钩中的回调是什么?

首先,我也仍在学习ReactJS,所以我的方法可能有错误,而没有错误。为此提前致歉。

打开“开发人员工具”的

console
窗口,分析我刚刚制作的
这个jsFiddle 示例。观察调用回调的顺序。

TweenMax
习惯对框进行一些动画处理,以使其在单击按钮时显示或消失。

低级API 公开为我们利用了不少有用的回调。共享的示例演示了这些回调的用法。

Javascript:

var ReactTransitionGroup = React.addons.TransitionGroup;var MyBox = React.createClass({    show: function(callback){        var node = React.findDOMNode(this);        TweenMax.fromTo(node, 2, { width: 100, height: 100, backgroundColor: '#0cc', scale: 0.2, opacity: 0, rotation: -180 }, { width: 100, height: 100, backgroundColor: '#0cc', scale: 1, opacity: 1, rotation: 0, ease: Expo.easeInOut, onComplete: callback, onCompleteScope: this });    },    hide: function(callback){        var node = React.findDOMNode(this);        TweenMax.to(node, 2, { width: 100, height: 100, backgroundColor: '#cc0', scale: 0.2, opacity: 0, ease: Expo.easeInOut, onComplete: callback, onCompleteScope: this });    },    componentWillAppear: function(didAppearCallback){        console.log('MyBox.componentWillAppear');        this.show(didAppearCallback);    },    componentDidAppear: function(){        console.log('MyBox.componentDidAppear');    },    componentWillEnter: function(didEnterCallback){        console.log('MyBox.componentWillEnter');        this.show(didEnterCallback);    },    componentDidEnter: function(){        console.log('MyBox.componentDidEnter');    },    componentWillLeave: function(didLeaveCallback){        console.log('MyBox.componentWillLeave');        this.hide(didLeaveCallback);    },    componentDidLeave: function(){        console.log('MyBox.componentDidLeave');    },    componentDidMount: function() {        console.log('MyBox.componentDidMount');    },    componentWillUnmount: function() {        console.log('MyBox.componentWillUnmount');    },    render: function(){        return <div>&nbsp;</div>;    }});var Container = React.createClass({    getInitialState: function(){        return { isShowing: false };    },    onButtonClicked: function(){        this.setState({ isShowing: !this.state.isShowing });    },    render: function(){        var myBox = this.state.isShowing ? <MyBox key="myBox" /> : '';        return ( <div id="container">     <MyButton onButtonClicked={this.onButtonClicked} />     <ReactTransitionGroup transitionName="hellotransition">         {myBox}     </ReactTransitionGroup> </div>        );    }});var MyButton = React.createClass({    render: function(){        return <button onClick={this.props.onButtonClicked}>Click Me</button>;    }});//React.render(<Container />, document.body);

让我知道是否有任何不清楚的地方,我很乐意分享我所知道的。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/636486.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号