在react中使用intro.js的的一些經驗

　　react逐漸熱了起來，但是新的東西畢竟前輩的經驗少一些，前段時間自己在react中用到intro.js時，得到的資料甚少，摸索后便將一些心得記錄下來了~

1 intro.js的引入，這一點請看上一篇博文關於如何在react中引入文件

2 在需要的頁面引入文件后， 可以給intro.js的出發點綁定函數

showIntrojs(){
    introJs().start();
  }

　　這樣intro.js就可以在頁面發揮作用了~

3 intro.js只會對整個組件起作用，並且要在組件外面添加一層父元素（div等），然后在div中添加相應的屬性，切記不要在組件中直接寫intro.js的屬性，一些標准通用的屬性在react中用駝峰形式的屬性寫代碼在編譯時會自動轉換成一般的（aB轉換為a-b）,但是像intro.js他的一些屬性是自己封裝的，不具有普遍性的，像data-step,data-intro這些屬性使用駝峰形式的話不會正確編譯。因此我們要在外面再加一層div,按照一般寫法輸入屬性。比如下面的例子：

 <div style={{height, overflow: 'scroll'}} data-step="1" data-intro="請輸入或者點擊相應schema進行查找" id="element1" data-position="right" showStepNumbers="false">
                <SideBar
                  schemas={this.state.schemas}
                  selectedFields={this.state.selectedFields}
                  selectedSchemas={this.state.selectedSchemas}
                  onFilterChange=""
                  onSelectFieldsChange={s => this.setState({selectedFields: s})}
                  onSelectSchema={v => {
                    let selectedSchemas =  this.state.selectedSchemas.concat([v]);
                    this.setState({ selectedSchemas });
                    this.handleSelectedSchemaChange(selectedSchemas);
                  }}
                  onDeselectSchame={ v => {
                    let schemas = this.state.selectedSchemas;
                    schemas.splice(schemas.indexOf(v), 1);
                    this.setState({selectedSchemas: schemas});
                    this.handleSelectedSchemaChange(schemas);
                  }}
                  />
              </div>

4 比較坑的一點是如果你想先只寫一個step,調試一下效果。那么就會發現永遠也改不好了~他的step要求是<=2。

5 有個小技巧是如果想要在一個地方放多個step,那么久多套幾個div好了~