如何在多个页面中使用 react joyride

Question

有没有办法在多个页面中创建react-joyride之旅。所以我的 index.js 文件如下所示？我在索引页面中添加了 react-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;
    }
  }
}

Answer 1

您可以为此使用 globalState，然后在所有页面上创建一个钩子。

对于全局状态：https ://endertech.com/blog/using-reacts-context-api-for-global-state-management

https://github.com/gilbarbara/react-joyride/discussions/756

const initialState = {
    tour: {
        run: false,
        steps: []
    }
}