javascript - ReactJS 监听/监视 DOM 变化

Question

我在 ReactJS 应用程序中有一个运行良好的简单轮播。但是，我试图仅在 (hasClass) 活动的情况下呈现幻灯片的内容，否则<myComponent/>在加载时触发 3 次。

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

非常感谢