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