如何在多页中使用React Joyride

Question

是否有一种在多个页面中创建React-Joyride Tour的方法。因此，我的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-reaeActs-context-api-for-global-state-management

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

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