亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使 Material UI 中的選項卡指示器響應?

如何使 Material UI 中的選項卡指示器響應?

肥皂起泡泡 2022-06-16 15:16:12
我設法用 material-ui 實現反應路由器。路由按預期工作,當您單擊選項卡時,它會將您路由到相應的組件。我遇到的問題是,當您單擊其中一個選項卡時,Material-ui 附帶的藍色下劃線指示器不會根據單擊的選項卡移動。它停留在相同的位置。import React from 'react';import Tabs from '@material-ui/core/Tabs';import Tab from '@material-ui/core/Tab';import SignIn from '../signIn/SignIn'import SignUp from '../signUp/SignUp';import About from '../about/About';import NavbarStyles from './NavbarStyles';import a11yProps from './NavbarStyles';import { Link, Switch, Route } from 'react-router-dom';import { Paper } from '@material-ui/core';export default function Navbar() { const classes = NavbarStyles(); const [value, setValue] = React.useState(0); const handleChange = (event, newValue) => {  setValue(newValue); };return (<div className={classes.root}>  <Paper>    <Tabs      value={value}      onChange={handleChange}      variant="scrollable"      scrollButtons="on"      indicatorColor="primary"      textColor="primary"      aria-label="scrollable force tabs example"    >     <Link to="/signin"><Tab label="Sign In" {...a11yProps(0)} /></Link>     <Link to="/signup"><Tab label="Sign Up" {...a11yProps(1)} /></Link>      <Link to="/about"><Tab label="About" {...a11yProps(2)} /></Link>    </Tabs>  </Paper>  <Switch>    <Route component={SignIn} path="/signin" />    <Route component={SignUp} path="/signup" />    <Route component={About} path="/about" />  </Switch></div> );}
查看完整描述

1 回答

?
PIPIONE

TA貢獻1829條經驗 獲得超9個贊

一些注意點:

  • 選項卡接受選項卡作為子項

  • 使用 props組件處理第三方 JSX 組件

  • 使用 props處理路由 URL

import { Tabs, Tab } from "@material-ui/core";

import { Link, BrowserRouter } from "react-router-dom";


<Tabs

  value={value}

  onChange={handleChange}

  variant="scrollable"

  scrollButtons="on"

  indicatorColor="primary"

  textColor="primary"

  aria-label="scrollable force tabs example"

>

  <Tab label="Sign In" component={Link} to={"/signin"} />

  <Tab label="Sign Up" component={Link} to={"/signup"} />

  <Tab label="About" component={Link} to={"/about"} />

</Tabs>


查看完整回答
反對 回復 2022-06-16
  • 1 回答
  • 0 關注
  • 101 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號