react-joyride使用小结

react-joyride是个神马东东呢？就是首页的新手导航步骤提示（自己编的名字,这都不重要）。

 react-joyride中比较重要的就是run，它代表着是否运行提示步骤。布尔值   

（举栗：在componentDidMount里判断是不是第一次登陆，然后决定他是true还是false）

除此之外，比较重要的就是提示框出现的位置。就是selector。selector在每个步骤里

每个提示的步骤都放在一个对象里：

{ 

 title: 标题 

 text: 内容 

 position: （top，left等）出现在元素的什么方向  

selector:  出现在哪个元素上 

 style: 样式（API有规定样式）

} 。 

这个对象就是一个步骤。然后通过addSteps函数把每一个元素的步骤提示加进去（给每个元素添加addSteps方法），最重要的是该元素的className要和selector保持一致

（再一次举栗： 假如你要把步骤绑定在导航栏上，并且你的导航栏元素是map出来的。

   在map的每一个对象里加上step对象，具体对象如上。这样能对应上步骤和元素

  重点！！！在每个元素上加一个className，值和selector的值对应。要不你的路痴步骤不知道自己要去哪显示！！！）

除了上述这些，还有一个功能大家比较常用，就是小灯泡，点击重新提示。 react-joyride给我们提供好了这个方法reset，但是用reset的时候一定要注意run的布尔值的改变，

(最后一次举栗：

this.joyride.reset()

this.setState({
isRunning: false
})

setTimeout(() => {

this.setState({
isRunning: true
})
}, 300)

)

大体就是这些。还有一些自带的对象和方法比如下一步，是否显示跳过什么的可以自己看一下API，官方的demo也不错。可以照着扒下来试试～

附上官方demo：https://github.com/gilbarbara/react-joyride/blob/demo/app/scripts/containers/App.jsx