材料-UI的Tabs集成与反应路由器4？
材料-UI的Tabs集成与反应路由器4？
提问于 2017-01-13 16:00:25
新的react路由器语法使用Link组件在路由周围移动。但是如何将其与material-ui集成？
在我的例子中，我使用制表符作为主导航系统，所以理论上我应该有如下所示：
const TabLink = ({ onClick, href, isActive, label }) =>
<Tab
label={label}
onActive={onClick}
/>
export default class NavBar extends React.Component {
render () {
return (
<Tabs>
<Link to="/">{params => <TabLink label="Home" {...params}/>}</Link>
<Link to="/shop">{params => <TabLink label="shop" {...params}/>}</Link>
<Link to="/gallery">{params => <TabLink label="gallery" {...params}/>}</Link>
</Tabs>
)
}
}但是当它呈现时，material会抛出一个错误，即Tabs的子组件必须是Tab组件。怎样才能继续下去呢？如何管理选项卡的isActive支柱？
提前感谢
回答 12
Stack Overflow用户
回答已采纳
发布于 2017-09-01 20:01:49
我的老师帮助我使用ReactiveRout4.0的withRouter包装Tabs组件，以启用如下所示的历史方法：
import React, {Component} from "react";
import {Tabs, Tab} from 'material-ui';
import { withRouter } from "react-router-dom";
import Home from "./Home";
import Portfolio from "./Portfolio";
class NavTabs extends Component {
handleCallToRouter = (value) => {
this.props.history.push(value);
}
render () {
return (
<Tabs
value={this.props.history.location.pathname}
onChange={this.handleCallToRouter}
>
<Tab
label="Home"
value="/"
>
<div>
<Home />
</div>
</Tab>
<Tab
label="Portfolio"
value="/portfolio"
>
<div>
<Portfolio />
</div>
</Tab>
</Tabs>
)
}
}
export default withRouter(NavTabs) 只需将BrowserRouter添加到index.js中就可以了。
Stack Overflow用户
发布于 2018-07-08 07:10:50
另一种解决方案(https://codesandbox.io/s/l4yo482pll)没有处理程序，也没有HOCs，只有纯粹的反应性-路由器和材料-ui组件：
import React, { Fragment } from "react";
import ReactDOM from "react-dom";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import { Switch, Route, Link, BrowserRouter, Redirect } from "react-router-dom";
function App() {
const allTabs = ['/', '/tab2', '/tab3'];
return (
<BrowserRouter>
<div className="App">
<Route
path="/"
render={({ location }) => (
<Fragment>
<Tabs value={location.pathname}>
<Tab label="Item One" value="/" component={Link} to={allTabs[0]} />
<Tab label="Item Two" value="/tab2" component={Link} to={allTabs[1]} />
<Tab
value="/tab3"
label="Item Three"
component={Link}
to={allTabs[2]}
/>
</Tabs>
<Switch>
<Route path={allTabs[1]} render={() => <div>Tab 2</div>} />
<Route path={allTabs[2]} render={() => <div>Tab 3</div>} />
<Route path={allTabs[0]} render={() => <div>Tab 1</div>} />
</Switch>
</Fragment>
)}
/>
</div>
</BrowserRouter>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);Stack Overflow用户
发布于 2017-07-05 15:47:15
您从material中看到的错误是因为它希望将<Tab>组件呈现为<Tabs>组件的直接子组件。
现在，我发现了一种方法，可以将链接集成到<Tabs>组件中，而不会丢失样式：
import React, {Component} from 'react';
import {Tabs, Tab} from 'material-ui/Tabs';
import {Link} from 'react-router-dom';
export default class MyComponent extends Component {
render() {
const {location} = this.props;
const {pathname} = location;
return (
<Tabs value={pathname}>
<Tab label="First tab" containerElement={<Link to="/my-firs-tab-view" />} value="/my-firs-tab-view">
{/* insert your component to be rendered inside the tab here */}
</Tab>
<Tab label="Second tab" containerElement={<Link to="/my-second-tab-view" />} value="/my-second-tab-view">
{/* insert your component to be rendered inside the tab here */}
</Tab>
</Tabs>
);
}
}要管理选项卡的“active”属性，可以在value组件中使用<Tabs>属性，并且每个选项卡还需要有一个value属性，因此当两个属性匹配时，它将对该选项卡应用active样式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41638688
复制相关文章
相似问题
腾讯云开发者
