不变违规:findComponentRoot运行jQuery滑块后无法找到元素

时间:2017-10-19 08:09:54

标签: jquery reactjs slick.js

我有一个React应用程序渲染一个jQuery光滑滑块,一切顺利,但当我进入下一个状态时,此滑块不再存在,React抛出一个不变违规:findComponentRoot。

简而言之:

renderIntro: function () {

    return <section className="content__wrap text-center questionnaire__intro">
        <div className="introSlider">
            <div className="slide">
                <h2>Welcome!</h2>
                <p>For this event we need you to answer some questions</p>
            </div>
            <div className="slide">
                <h2>How</h2>
                <p>We'll show you a question with two pictures</p>
                <p>Tap on the picture of your choice</p>
            </div>
            <div className="slide">
                <h2>Okay!</h2>
                <p>When you're ready, click the start button below</p>
                <div onClick={this.startQuestionnaire} className="button button--primary">Start</div>
            </div>
        </div>
    </section>
},

startIntroSlider: function() {
    if ( $('.introSlider' ).length > 0 ) {
        $('.introSlider').slick({
            infinite: false,
            dots: true
        });
        if(this.state.questionnaireStarted) {
            $('.introSlider').unslick();
        }
    }
},

componentDidUpdate: function () {
},

componentDidMount: function () {
    this.startIntroSlider();
},

render: function ()
{
    var renderMain = this.renderQuestions();
    if ( !this.state.questionnaire.started ) {
        renderMain = this.renderIntro();
    }

    return <div className="wrapper wrapper--questionnaire">
        <div className={"l-container l-container--mobile " + this.state.questionnaire.questionnaire.class}>
            {renderMain}
        </div>
    </div>
}

如果问题开始渲染那些,否则渲染作为滑块的介绍。最后一张幻灯片包含一个按钮,用于启动问题,之后滑块不再位于DOM中。

我无法想到如何做到这一点,因为我是React的新手所以我会喜欢一些帮助:)!

0 个答案:

没有答案