複数の子コンポーネントで反応ジヨライドを使用する

Question

私のアプリケーションにreact-joyrideを使用したいが問題がある。私のコンポーネントはNavbarとSideNavigationに分類されています。それらは別個の子コンポーネントです。今度は、react-joyrideをSideNavigationで最初に使用し、最後のステップをNavbarにします。どうすればいい？ここで

は、あなたがそれをコンポーネント故障/構造のこれらの種類と反応-JOYRIDEを使用することが可能だと思いますか私のコード

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> 
    ); 
    } 
} 

のですか？私はそれをどのように使うことができるのか全く知らない。誰も私を導くことができますか？私は上記のコードを書くことができました。どこにエラーが出ることもなく、ボタンをクリックしてもイントロの部分が見えません。私は何かを逃したか？ここで

は読みやすく

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

Answer 1

ための要旨内のコードであるコンポーネント内訳（トップとサイド・ナビゲーション）場合は、[はい、それはこの種で可能です。 重要なことは、joyrideのために「arrayOfSteps」を適切に設定していることです。重要なのは、ジョイライドコンポーネントのステップの「セレクタ」プロパティを設定することです。

たとえば、ステップの配列は、トップとサイドのナビゲーションタグを通過できます。何かのように：

{ 
    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:{ 
    ..... 
    } 
},