ReactJS监听/监视DOM更改

Question

我在ReactJS应用程序中有一个简单的Carousel运行良好。但是，我只是在（hasClass）处于活动状态时才尝试渲染幻灯片的内容，否则<myComponent/>会在加载时触发三次。

ReactJS监听DOM（div）更改并监听其类更改的正确方法是什么？何时.active呈现内容？

代码：

    render() {
        return (
            <div class="carousel slide carousel-fade " >
                <div class="carousel-inner"  >
                    <div class="item active" ref="slide">
                        {/*if class is active render the content, else is null*/}
                        <myComponent/>
                    </div>
                    <div class="item" ref="slide">
                        {/*if class is active render the content, else is null*/}
                        <myComponent/>
                    </div>
                    <div class="item" ref="slide">
                        {/*if class is active render the content, else is null*/}
                        <myComponent/>
                    </div>
                </div>
            </div>
        )
    }

非常感谢