react 如何销毁组件，并触发销毁事件？

Question

react 如何销毁组件并触发离场事件？

比如以下代码。

javascript :

const ComBox = () => {    const HideAni = () =>{        //这里如何触发销毁？？？？
    }    return (        <div>
            <div onClick={()=> HideAni()}>销毁按钮</div>

            <ReactCSSTransitionGroup 
                transitionName="example"
                transitionLeaveTimeout={300}
            >
                <p>我是要销毁的内容</p>
            </ReactCSSTransitionGroup>
            {box}        </div>
    )
}

CSS :

.example-leave {    opacity: 1;
}.example-leave.example-leave-active {    opacity: 0.01;    transition: opacity 300ms ease-in;
}

当我点击 销毁按钮 的时候，如何才能销毁下面的内容，并触发离场动画？

Answer 1

只要你把数据清除了,自然就会触发动画了.记住一点,我们只要操作数据就好,React会帮我们更新UI.class ComBox extends Component {&nbsp; &nbsp; state = {&nbsp; &nbsp; &nbsp; &nbsp; content: 'ghgsdfs'&nbsp; &nbsp; }&nbsp; &nbsp; HideAni = () => {&nbsp; &nbsp; &nbsp; &nbsp; this.setState({content: ''})&nbsp; &nbsp; }&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onClick={()=> this.HideAni()}>销毁按钮</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ReactCSSTransitionGroup&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transitionName="example"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transitionEnterTimeout={500}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transitionLeaveTimeout={300}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.state.content ? <p>{this.state.content}</p> : ''}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ReactCSSTransitionGroup>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }}