操作指引：react-joyride

一、链接

1. 官网地址(demo)：react-joyride.com/
2. github、npm：github.com/gilbarbara/…、www.npmjs.com/package/rea…
3. api文档：docs.react-joyride.com/props

二、功能简介

• 以popover的形式附着在目标元素上，以达到解释目标元素效果。
• 存在多个目标元素时，提供上一步/下一步/结束三个按钮。
• 当元素超出可视区域时，自动滚动到目标元素的位置。
• 屏幕大小变化时，popover能始终附着在目标元素上

三、实现原理

• React.createPortal
• HTMLElement.offsetParent：返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th,body元素。当元素的 style.display 设置为 “none” 时，offsetParent 返回 null。
• HTMLElement.offsetXXX：相对于offsetParent
• Element.getBoundingClientRect()：返回元素大小（包括border+padding）以及相对视口的位置
• 库 react-floater：github.com/gilbarbara/…

四、基本用法

import Joyride from 'react-joyride';

export class App extends React.Component {
  state = {
    steps: [
      {
        target: '.my-first-step',
        content: 'This is my awesome feature!',
      },
      {
        target: '.my-other-step',
        content: 'This another awesome feature!',
      },
      ...
    ]
  };

  render () {
    const { steps } = this.state;

    return (
      <div className="app">
        <Joyride
          steps={steps}
          ...
        />
        ...
      </div>
    );
  }
}

steps: [
    {
        title: '操作引导',
        target: '.dataHeader',
        content: 'This is my awesome feature!',
        hideCloseButton: true,
        disableBeacon: true,
        locale: {
            next: '下一步',
            skip: '跳过',
            close: '下一步',
        },
    },
    {
        title: '操作引导',
        target: '.history-data-table-indicatorName',
        content: 'This another awesome feature!',
        hideCloseButton: true,
        disableBeacon: true,
        locale: {
            back: '上一步',
            next: '下一步',
            skip: '跳过',
            close: '完成',
        },
    },
        ],

五、api

• hideBackButton {boolean} ▶︎ false Hide the "back" button.
• hideCloseButton {boolean} ▶︎ false Hide the "close" button.
• locale {object} ▶︎ { back: 'Back', close: 'Close', last: 'Last', next: 'Next', open: 'Open the dialog', skip: 'Skip' } The strings used in the tooltip.
• run {boolean} ▶︎ true Run/stop the tour.
• showProgress {boolean} ▶︎ false Display the tour progress in the next button _e.g. 2/5 _in continuous tours.
• showSkipButton {boolean} ▶︎ false Display a button to skip the tour.
• spotlightClicks {boolean} ▶︎ false Allow mouse and touch events thru the spotlight. You can click links in your app.
• spotlightPadding {number} ▶︎ 10 The padding of the spotlight.
• steps {Array} - required The tour's steps.
• styles {object} Override the styling of the Tooltip globally
• tooltipComponent {React.Node} A React component or function to be used instead the default Tooltip excluding the arrow.