reactjs - 根据访问的路线将 Material-UI 选项卡设置为事件状态

Question

在我的新react-redux应用程序中(我是react新手)，我正在使用 Material-UI并在我的网络应用程序上添加了material-ui选项卡。这些选项卡旨在根据选择更改 URL，这是我使用以下代码片段实现的。

function handleActive(tab) {
    browserHistory.push(tab.props['data-route']);
}

当我手动访问路线而不是单击选项卡时，我希望我的选项卡显示选定的选项卡指示器。我现在无法弄清楚。任何人都可以建议我一种通过 react 或还原来做到这一点的方法吗？如果我的问题不清楚，请告诉我。

更新

我的组件中的代码render()。组件中没有其他内容。

render() {
    function handleActive(tab) {
        browserHistory.push(tab.props['data-route']);
    }

    return (
        <Paper>
            <Toolbar className="navbar">
                <ToolbarGroup>
                    <Link to="/" style={{ textDecoration: 'none' }}>
                        <ToolbarTitle style={this.styles.title} text="Test App" />
                    </Link>
                </ToolbarGroup>
                <ToolbarGroup className="tab-container">
                    <Tabs className="tabs">
                        <Tab data-route="/" onActive={handleActive} className="tab" label="Route A" />
                        <Tab data-route="/routeB" onActive={handleActive} className="tab" label="Route B" />
                        <Tab data-route="/routeC" onActive={handleActive} className="tab" label="Route C" />
                        <Tab data-route="/routeD" onActive={handleActive} className="tab" label="Route D" />
                    </Tabs>
                </ToolbarGroup>
            </Toolbar>
        </Paper>
    );
}

Answer 1

我怀疑解析 url 是否是一个好主意。也许最好通过 onEnter 中的路由器调度操作来控制选项卡索引。 <Route>的支柱？

假设您有 2 条路线:

<Route path='sign_in' component={AuthenticationWrapper} onEnter={() => { store.dispatch(changeTab(0)) }} />
<Route path='sign_up' component={AuthenticationWrapper} onEnter={() => { store.dispatch(changeTab(1)) }} />

Action 创建者:

changeTab = (index) => {
  return { type: AUTH_TAB_CHANGE, index }
}

reducer :

authTab = (state = 0, action = {}) => {
  switch (action.type) {
    case AUTH_TAB_CHANGE:
      return action.index
    default:
      return state
  }
}

组件:

class AuthenticationWrapper extends Component {
  constructor(props) {
    super(props)

    this.handleSignIn = this.handleActive.bind(this, '/sign_in')
    this.handleSignUp = this.handleActive.bind(this, '/sign_up')
  }

  handleActive(url) {
    browserHistory.push(url)
  }

  render() {
    const { authTab, changeTab } = this.props

    return (
      <Tabs index={authTab} onChange={changeTab}>
        <Tab label='Sign In' onActive={this.handleSignIn}>
          <SignInForm />
        </Tab>
        <Tab label='Sign Up' onActive={this.handleSignUp}>
          <SignUpForm />
        </Tab>
      </Tabs>
    )
  }
}

const mapStateToProps = ({ authTab }) => {
  return {
    authTab
  }
}

export default connect(mapStateToProps, {
  changeTab,
})(AuthenticationWrapper)

这种方法既可以访问不同的网址，也可以通过单击选项卡来更改选项卡，而无需刷新页面。