在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好了~