Question

我正在使用react-router，我正在尝试组合一些路由/子路由。

我有一个left menu bar有2个选项：主和辅助，如果您点击 main ，然后是{{ 3}}应该打开4个选项，如果你点击 secondary ，同样应该发生但有3个不同的选项。

左侧菜单栏组件

export default class LeftNavMenu extends React.Component {

  static propTypes = {
    getActivePage : React.PropTypes.func,
    leftMenuItems : React.PropTypes.arrayOf(React.PropTypes.object),
  }

  static contextTypes = {
    router : React.PropTypes.func,
  }

  render () {
    return (
      <LeftNav
        ref="appNavbar"
        docked={false}
        menuItems={this.props.menuItems}
        selectedIndex={this.props.getActivePage()}
        onChange={this.props._onLeftNavChange} />
    );
  }

  // Navigate to route when clicking on a Side Bar element.
  _onLeftNavChange = (e, key, payload) => {
    if (payload.route === 'main') {
      console.log(payload.route);
    }
    this.context.router.transitionTo(payload.route);
  }
}

这是标签组件

export default class TabsMainMenu extends React.Component {

  static propTypes = {
    getActivePage : React.PropTypes.func,
    menuItems     : React.PropTypes.arrayOf(React.PropTypes.object),
  }

  static contextTypes = {
    router : React.PropTypes.func,
  }

  render () {
    const tabs = this.props.menuItems.map((item) => {
      return (
        <Tab
          key={item.route}
          label={item.text}
          route={item.route}
          onActive={this._onActive} />
      );
    });

    return <Tabs initialSelectedIndex={this.props.getActivePage()}>{tabs}</Tabs>;
  }

  _onActive = tab => {
    this.context.router.transitionTo(tab.props.route);
  }

**这里是我调用上面两个组件的主要组件

const menuItems = [
  { route : 'universal-search', text : 'Universal Search' },
  { route : 'game-info', text : 'Game Info' },
  { route : 'player-info', text : 'Players Info' },
  { route : 'money', text : 'Money' },
  { route : 'refunds', text : 'Refunds' },
  { route : 'videos', text : 'Videos' },
  { route : 'tips', text : 'Tips' },
], leftMenuItems = [
  { route : 'main', text : 'Main - Management' },
  { route : 'secondary', text : 'Secondary - Operations' },
];

export default class App extends React.Component {

  static contextTypes = {
    router : React.PropTypes.func,
  }

  render () {
    return (

        <LeftNavMenu ref="appNavbar" menuItems={leftMenuItems} getActivePage={this._getActivePage} />

        <TabsMainMenu menuItems={menuItems} getActivePage={this._getActivePage} />

        <RouteHandler />
    );
  }


  // Toggle Side Bar.
  _onLeftIconButtonTouchTap = () => {
    this.refs.appNavbar.refs.appNavbar.toggle();
  }

  // Get the active page.
  _getActivePage = () => {
    for (const i in menuItems) {
      if (this.context.router.isActive(menuItems[i].route)) return parseInt(i, 10);
    }
  }

  _onChange = (event) => {
    this.setState({value: event.target.value});
  }  

}

这是路线

const Routes = (
  <Route handler={Root}>

    <Route name="app" path="/" handler={App}>
      <Route name="main">
        <Route name="game-info" path="game-info" handler={GameInfo} />
        <Route name="player-info" path="player-info" handler={PlayerInfo} />
        <Route name="money" path="money" handler={Money} />
        <Route name="refunds" path="refunds" handler={Refunds} />
      </Route>
      <Route name="secondary">
        <Route name="videos2" path="videos" handler={Videos} />
        <Route name="tips2" path="tips" handler={Tips} />
        <Route name="universal-search2" handler={UniversalSearch} />
      </Route>      
      <DefaultRoute handler={UniversalSearch} />
    </Route>

    <Route name="login" handler={Login} />
  </Route>
);

在我上面写的第一个组件中看这个

  // Navigate to route when clicking on a Side Bar element.
  _onLeftNavChange = (e, key, payload) => {
    if (payload.route === 'main') {
      console.log(payload.route);
    }
    this.context.router.transitionTo(payload.route);
  }

我需要告诉应用程序if payload.route === 'main'然后显示我需要的标签，但是，在该组件中，我该怎么做才能从标签组件中获取标签？

那么，根据用户是选择左侧菜单栏组件中的main还是secondary，我应该怎么做才能调用我需要的路线？

Answer 1

我很难关注，所以我无法编写一些示例代码，但听起来我觉得你需要一个商店来坐在标签组件后面。

商店肯定会保存数据，以确定＆＃34;当前标签＆＃34; （如选项卡索引或路径名称）。

它也可能包含完整的标签列表。这是我不确定的地方，因为示例代码似乎很复杂，而显然也只是更大的应用程序的片段......

在ReactJS

1 个答案: