javascript - 在多个子组件中使用 react-joyride

Question

我想在我的应用程序中使用 react-joyride 但是有一个问题。我已将我的组件分解为 Navbar 和 SideNavigation。它们是单独的子组件。现在，我想首先在 SideNavigation 中使用 react-joyride，然后在 Navbar 中使用最后一步。我该怎么做？

这是我的代码

class AgentDashboard extends React.Component {
  constructor() {
    super();
    this.state = {
      username: "",
      roles: [],
      joyrideOverlay: true,
      joyrideType: "continuous",
      isReady: false,
      isRunning: false,
      stepIndex: 0,
      steps: [],
      selector: ""
    };
  }
  componentDidMount() {
  this.setState({
      isReady: true,
      isRunning: true,
    });
  }


  addSteps(steps) {
    let newSteps = steps;
    if (!Array.isArray(newSteps)) {
      newSteps = [newSteps];
    }

    if (!newSteps.length) {
      return;
    }

    this.setState(currentState => {
      currentState.steps = currentState.steps.concat(newSteps);
      return currentState;
    });
  }

  callback(data) {
    this.setState({
      selector: data.type === "tooltip:before" ? data.step.selector : ""
    });
  }

  next() {
    this.joyride.next();
  }

  render() {
    const {
      isReady,
      isRunning,
      joyrideOverlay,
      joyrideType,
      selector,
      stepIndex,
      steps
    } = this.state;
    let html;
    if (isReady) {
      html = (
        <div>
          <Joyride
            ref={c => (this.joyride = c)}
            callback={data => this.callback(data)}
            debug={false}
            disableOverlay={selector === ".card-tickets"}
            locale={{
              back: <span>Back</span>,
              close: <span>Close</span>,
              last: <span>Last</span>,
              next: <span>Next</span>,
              skip: <span>Skip</span>
            }}
            run={isRunning}
            showOverlay={joyrideOverlay}
            showSkipButton={true}
            showStepsProgress={true}
            stepIndex={stepIndex}
            steps={steps}
            type={joyrideType}
          />
          <TopNavigation
            username={this.state.username ? this.state.username : ""}
            }
            roles={this.state.roles}
          />
          <main className="imp">
            <SideNavigation
              currentNav={this.props.location.pathname.substring(1)}
              addSteps={steps => this.addSteps(steps)}
              selector={selector}
              next={() => this.next()}
            />
          </main>
        </div>
      );
    }
    return (
      <div>
        {html}
      </div>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(AgentDashboard);

SideNavigation.js

const sideMenus = [
  {
    menu: "My Property",
    link: "imp/dashboard/my-properties",
    icon: "icon-hotel",
    class: "hotel-selector"
  },
  {
    menu: "My IMP",
    link: "imp/dashboard/my-imps",
    icon: "icon-people-outline",
    class: "imp-selector"
  },
];

class SideNavigation extends React.PureComponent {
  componentDidMount() {
    const steps = [
      {
        title: "Trigger Action",
        text: "It can be click",
        selector: ".imp-dashboard",
        position: "right",
        type: "hover",
      },
      {
        title: "Advance customization",
        text:
          "You can set individual styling options for beacons and tooltips.",
        selector: ".hotel-selector",
        position: "bottom",
        allowClicksThruHole: true,
        style: {
          backgroundColor: "#ccc",
          mainColor: "#000",
          header: {
            color: "#f04",
            fontSize: "3rem",
            textAlign: "center"
          },
          footer: {
            display: "none"
          },
          beacon: {
            inner: "#000",
            outer: "#000"
          }
        }
      }
    ];
    this.props.addSteps(steps);
  }

  handleClick = e => {
    e.preventDefault();
    const { next } = this.props;
    next();
  };

  render() {
    const { currentNav, selector } = this.props;
    const menuToShow = sideMenus.map(menuItem =>
      <Menu.Item key={menuItem.link} className={menuItem.class}>
        <NavLink
          activeClassName={currentNav.includes(menuItem.link) ? "active" : ""}
          to={`/${menuItem.link}`}
        >
          <i className={menuItem.icon} />
          <span>
            {menuItem.menu}
          </span>
        </NavLink>
      </Menu.Item>
    );
    return (
      <Sidebar.Pushable>
        <Sidebar
          as={Menu}
          width="thin"
          visible
          icon="labeled"
          vertical
          inverted
        >
          <Menu.Item name="dashboard" className="imp-dashboard">
            <NavLink
              activeClassName={currentNav === "imp/dashboard" ? "active" : ""}
              to="/imp/dashboard"
            >
              <i className="icon-activity" />
              <span>Dashboard</span>
            </NavLink>
          </Menu.Item>
          {menuToShow}
        </Sidebar>
        <Sidebar.Pusher>
          <Routes />
        </Sidebar.Pusher>
      </Sidebar.Pushable>
    );
  }
}

您认为可以将 react-joyride 与这些组件分解/结构一起使用吗？我对如何使用它一无所知。任何人都可以指导我吗？我设法编写了上面的代码，其中我没有收到任何错误，也没有在单击按钮时看到任何介绍部分在工作。我错过了什么吗？

为了更好的可读性，这里是 gist 中的代码

https://gist.github.com/anonymous/bc0121ab23652513c2639a0aa55c4390

Answer 1

是的，如果组件分解(顶部和侧面导航)，这种情况是可能的。重要的是为欢乐之旅正确配置“arrayOfSteps”。重要的是，在 joyride 组件中配置步骤的“selector”属性。

例如，步骤数组可以穿过顶部和侧面导航标签。像这样的东西:

   {
  title: 'First Step',
  text: 'Start using the <strong>joyride</strong>',
  selector: '#first-top_menu',
  position: 'bottom-left',
  type: 'hover',
  isFixed: true,
  // optional styling
  style:{
   .....
    }
},
{
  title: 'Second Step',
  text: 'Start using the <strong>joyride</strong>',
  selector: '#second-top_menu',
  position: 'bottom-left',
  type: 'hover',
  isFixed: true,
  // optional styling
  style:{
   .....
    }
},
{
  title: 'Third Step',
  text: 'Start using the <strong>joyride</strong>',
  selector: '#first-side_menu',
  position: 'bottom-left',
  type: 'hover',
  isFixed: true,
  // optional styling
  style:{
   .....
    }
},