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>
        )
    }
}

Answer 2

ReactDOM.unmountComponentAtNode(document.getElementById("example"));
其中：example 是容器id

参考资料：资料参考来源