gpt4 book ai didi

javascript - 使用@Material-UI 标签作为导航栏

转载 作者:搜寻专家 更新时间:2023-11-01 04:22:00 25 4
gpt4 key购买 nike

编码空间相当新。我曾尝试到处寻找这个问题的答案,虽然我找到了很多答案,但没有一个对我有用。

我的问题是我想将@Material-UI 选项卡组件用作 NavBar,我似乎只能 1. 将选项卡变成可以工作但没有动画或指示器的静态链接,或者 2. 保留动画,但就更改页面而言没有任何功能。

我试过了this , this , this ,以及更多,以及在每一个中找到的许多答案。

编辑:Here是一个 Git 仓库。

这是我的 NavBar 组件,目前处于状态 #2,它有动画但没有功能:

import React from 'react';
import { Paper, Tabs, Tab } from '@material-ui/core';

const navStyle= {
backgroundColor: '#220000',
color: '#fff',
}

export class NavBar extends React.Component {
state = {
value: 0,
};

handleChange = (event, value) => {
event.preventDefault();
this.setState({ value });
console.log(value)
};

render() {
return (
<div>
<Paper>
<Tabs
value={this.state.value}
onChange={this.handleChange}
indicatorColor={"secondary"}
// textColor="secondary"
centered
style={navStyle}
>
<Tab label="Home" href='/' />
<Tab label="About" href='/about' />
</Tabs>
</Paper>
</div>
)}
}

依赖关系:

"@material-ui/core": "^1.3.1",
"history": "^4.7.2",
"prop-types": "^15.6.2",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.4"

最佳答案

您可以将您的 Tab 组件变成 React Router Link 组件,就像您链接的第一个示例中那样。

请确保不要在 handleChange 事件上使用 preventDefault,因为那样会使链接停止工作。

示例

class App extends React.Component {
state = {
value: 0
};

handleChange = (event, value) => {
this.setState({ value });
};

render() {
return (
<BrowserRouter>
<div>
<Paper>
<Tabs
value={this.state.value}
onChange={this.handleChange}
indicatorColor={"secondary"}
centered
style={navStyle}
>
<Tab label="Home" to="/" component={Link} />
<Tab label="About" to="/about" component={Link} />
</Tabs>
</Paper>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</div>
</BrowserRouter>
);
}
}

关于javascript - 使用@Material-UI 标签作为导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51313969/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com