根据访问路径设置Material-UI选项卡

Question

在我的新react-redux应用程序中(我是新手做出反应),我正在使用Material-UI并在我的网络应用程序中添加了材料-ui标签.选项卡用于在选择时更改URL,使用以下代码完成.

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

当我手动访问路线而不是单击选项卡时,我希望我的选项卡显示选定的选项卡指示器.我现在无法弄明白.任何人都可以建议我通过react或redux来做到这一点吗？让我知道,如果我不清楚我的问题.

UPDATE

我的组件中的代码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

我怀疑解析网址是个好主意.也许是更好地从路由器调度动作控制的标签索引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)) }} />

行动创造者:

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

减速器:

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)

这种方法既可以访问不同的URL,也可以通过单击更改标签而无需刷新页面.

Answer 2

虽然有几种方法可以做到这一点，但由于您使用的是 React 组件类，因此您可以添加componentWillMount

componentWillMount() {

  let urlPath = window.location.pathname;
  let currentTab = urlPath.split('/').pop();
  // you can add more validations here
  this.setState({ activeTab: currentTab || 'default' });

}

在你的render方法中，更改<Tabs className="tabs">为

<Tabs
  className="tabs"
  value={this.state.activeTab}
  >
    <Tab value="default" data-route="/" onActive={handleActive} className="tab" label="Route A" />
    <Tab value="routeC" data-route="/routeC" onActive={handleActive} className="tab" label="Route C" />
    ...

我不知道这是否是我们应该value为Tab.. 设置的方式，但可以尝试一下。

它应该有效。

我在这里使用了setState而不是redux，因为使用组件状态没有任何问题，只要这是唯一需要知道哪个选项卡当前处于活动状态的组件。redux不过，您可以轻松地将其更改为使用。