在 ReactJS 中的 2 个不同文件之间进行对话

Question

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

我有一个 left menu bar 有 2 个选项：main 和 secondary，如果你点击 main，那么 menu with tabs 应该打开有 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

我很难理解，所以我无法编写一些示例代码，但在我看来，您需要一个商店来坐在标签组件后面。

商店肯定会保存对确定“当前选项卡”有用的数据（例如选项卡索引或路由名称）。

它还可能包含完整的选项卡列表。这是我不确定的地方，因为示例代码看起来很复杂，而显然也只是更大应用程序的 sn-ps...