Some of the experience of using intro.js in react

React gradually warm up, but the new things, after all the experience of the predecessor of a few, the former period of time in the react in the use of intro.js, the information is very little, after groping will be some of the notes down ~

1 Introduction to Intro.js, see a blog post about how to introduce files in react

2 after introducing a file in the required page, you can give intro.js the starting point of the binding function

Showintrojs () {    Introjs (). Start ();  

So that intro.js can play a role in the page ~

3 Intro.js will only work on the entire component, and to add a layer of parent elements (div, etc.) outside the component, and then add the corresponding attribute in the Div, remember not to write the Intro.js property directly in the component, some standard common properties write code in the Camel form in react at compile time will be automatically converted to general (a b), but some of his properties, like Intro.js, are encapsulated and not universal, such as Data-step,data-intro, which are not compiled correctly using hump form. So we're going to add a div to the outside and enter the attributes in the general notation. For example, the following:

<div style={{height, overflow: ' Scroll '}} data-step= "1" data-intro= "Please enter or click on the corresponding schema to find" 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 comparison pits The point is if you want to write a step first, debug the effect. Then you'll find that it's never going to change. His step requirements are <=2.

5 There is a trick is if you want to put more than one step in a place, then a few more sets of Div good ~

Some of the experience of using intro.js in react