我有一个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的新手所以我会喜欢一些帮助:)!