结合使用Material-UI标签和react [英] Using material-UI tabs with react
问题描述
我偶然发现的是了解如何使用Material-UI选项卡.我发现了很多帖子，但是每个帖子针对的是不同版本的Material-UI，并且每个帖子都提供了完全不同的实现方式.
Something I stumble upon is understanding how to use Material-UI tabs. I found many posts but each target a different version of material-UI and each give a completely different way of implementation.
我创建的Web应用程序是分析仪表板.我在页面上有3个部分.
The web application I an creating is an analytical dashboard. I have 3 parts on the page.
- 应用栏
- 主体
- 页脚
在主体部分，我想要一个选项卡组件和仪表板组件.选择其他选项卡将显示不同的仪表板组件.
In the main body part I want to have a tabs component and dashboard component. Selecting different tab will display different dashboard component.
我从默认的Tabs组件开始，该组件显示不正确，然后我读到我需要使用React Router来做，但是这取决于我使用的路由器版本.
I started with the default Tabs component which didn’t display it right, and then I read that I need to do it using React Router, but then it depends on which router version I use.
在使用Tabs时，为什么我应该参与路由器，这可能也是我对SPA缺乏了解.
It might be that my SPA understanding is also lacking as to why I should involve router when using Tabs.
我的设置:最新的React 16.x最新的React -router 4.x最新Material-UI 1.0.3也使用Redux
My setup: Latest React 16.x Latest React -router 4.x Latest Material-UI 1.0.3 Using Redux as well
推荐答案
这是我使用Material-ui中的App栏和标签与react-router
here is small example I created using App bar and tabs from Material-ui with react-router
<BrowserRouter>
<div className={classes.root}>
<AppBar position="static" color="default">
<Tabs
value={this.state.value}
onChange={this.handleChange}
>
<Tab label="Item One" component={Link} to="/one" />
<Tab label="Item Two" component={Link} to="/two" />
</Tabs>
</AppBar>
<Switch>
<Route path="/one" component={PageShell(ItemOne)} />
<Route path="/two" component={PageShell(ItemTwo)} />
</Switch>
</div>
在这里，我已使用Switch来为应用程序引入路由，并使用Link组件来触发路由更改
here I have used Switch to introduce routes for the application and Link component to trigger route changes
工作示例: https://codesandbox.io/s/04p1v46qww
我为示例添加了过渡动画，如果需要，可以随时删除动画.
I have added transition animation for the example feel free to remove the animation if you wish.
那是我们希望添加用户浏览路线网址并找到相关页面的时候，例如:/home将呈现主页和/profile作为个人资料页面.
That's when we want add users to go through routes urls and find the relevant pages ex: /home will render home page and /profile for profile page.
通过react-router，您可以使用许多功能，例如浏览历史记录，这意味着您可以查看返回的先前页面.
with react-router you can use many functionalities like go through history that means you can view previous pages you went with going back.
传递url参数，以便我们可以在参数变化时呈现组件
pass url params so we can render components as params changes
但是，如果开发人员希望，他可以无需使用路线来设计和完成应用.有条件渲染将是一团糟，但仍然如此.
however If a developer wish he can design and finish an app without using routes. It will be a mess with conditional rendering but still.
从用户的角度来看，它是一个常规的Web应用程序(他不需要知道其设计方式:SPA还是其他方式)，并且应该可以像任何Web应用程序/网站一样工作.这就是路由同时帮助我们进行更高效开发的作用.
from the user's view, it is a regular web app (he doesn't need to know how it is designed: SPA or otherwise) and it should work as any web app/website should work. That's what routing does same time help us to do more efficient development.
使用此选项卡不使用路由: https://codesandbox.io/s/qlq1j47l2w
use this for tabs without using routes: https://codesandbox.io/s/qlq1j47l2w
希望这对您有帮助
这篇关于结合使用Material-UI标签和react的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
