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

妖狐艹你老母 2023-08-17 17:20 100阅读 0赞

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

转载于:https://www.cnblogs.com/s-z-y/p/5254470.html