Question

您好，有一种方法可以在多个页面中创建响应式喜悦。因此，我的index.js文件如下所示。任何建议如何在多个页面中使用Joyride。我在索引页中添加了Joyride，因为所有组件都通过index.js文件运行大家好，有一种方法可以在多个页面中创建欢乐骑行。所以我的index.js文件如下所示。任何建议如何在多个页面中使用Joyride。我在索引页中添加了Joyride，因为所有组件都通过index.js文件运行

class IndexApp extends Component {
  constructor(props) {
    super(props);

    this.state = {
      view: false,
      run: true,
      steps: [
      {
        target: '.cc',
        content: 'This is my awesome feature!',
      },
    ],
    stepIndex: 0
    };
  }

  handleJoyrideCallback = data => {
    const { action, index, status, type } = data;
console.log("ghgg")
    if ([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND].includes(type)) {
      // Update state to advance the tour
      this.setState({ stepIndex: index + (action === ACTIONS.PREV ? -1 : 1) });
    }
    else if ([STATUS.FINISHED, STATUS.SKIPPED].includes(status)) {
      // Need to set our running state to false, so we can restart if we click start again.
      this.setState({ run: false });
    }

    console.groupCollapsed(type);
    console.log(data); //eslint-disable-line no-console
    console.groupEnd();
  };

  componentDidCatch(error, errorInfo) {
    this.setState({ error });
    unregister();
  }



  render() {
    const { view,run, stepIndex, steps } = this.state;


    if (view) {
      return( <div>
      {this.props.children}

       <Joyride
          callback={this.handleJoyrideCallback}
          run={run}
          stepIndex={stepIndex}
          steps={steps}

        />


      </div>);
    } else {
      return null;
    }
  }
}

如何在多个页面中使用React Joyride

0 个答案: