在react中使用intro.js的的一些经验

Posted 2020-06-19 如梦令szy

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