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 {

    state = {

        content: 'ghgsdfs'

    }

    HideAni = () => {

        this.setState({content: ''})

    }

    render() {

        return (

            <div>

                <button onClick={()=> this.HideAni()}>销毁按钮</button>

                <ReactCSSTransitionGroup

                    transitionName="example"

                    transitionEnterTimeout={500}

                    transitionLeaveTimeout={300}

                >

                    {this.state.content ? <p>{this.state.content}</p> : ''}

                </ReactCSSTransitionGroup>

            </div>

        )

    }

}