reactjs - Material UI Tab 将道具传递给组件
问题描述
我正在尝试将 react-router 与 Material-UI V1 Tabs 集成,就像在这个 github 问题、这个 stackoverflow 帖子中一样,它们对我来说是错误的答案。
据我了解,这就是您应该执行的方式:
import Tab from '@material-ui/core/Tab';
import Link from 'react-router-dom';
/* other code */
<Tab component={Link} to="/" value={'/'} key={'/'} label={'/'}/>
但是我得到了错误[ts] property 'to' does not exist on type...
。
我也试过:
<Tab component={() => <Link to='/' />} value={'/'} key={'/'}] label={'/'}/>
但在这种情况下,我的Tab
组件根本不渲染。
想法?
解决方案
问题的根源是Tab
类型是这样声明的:
declare const Tab: React.ComponentType<TabProps>;
TabProps
当然没有to
财产。
为了解决这个问题,声明一个名为的新变量LinkTab
:
const LinkTab: React.ComponentType<TabProps & LinkProps> = Tab as React.ComponentType<TabProps & LinkProps>;
并像下面这样使用它:
<LinkTab icon={<ListIcon />} component={Link} to="/monitor" />
这应该编译得很好。
带导入的完整代码示例:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MonitorContainer } from "Monitor/MonitorContainer";
import { HashRouter as Router, Route, Redirect, Switch, Link, LinkProps } from 'react-router-dom';
import { RemoteContainer } from "Remote/RemoteContainer";
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import { default as Tab, TabProps } from '@material-ui/core/Tab';
import ListIcon from '@material-ui/icons/ListAlt';
import RemoteControlIcon from '@material-ui/icons/SettingsRemote';
import './reset.css';
import './index.scss';
import '../assets/fonts/icons/flaticon.css';
const LinkTab: React.ComponentType<TabProps & LinkProps> = Tab as React.ComponentType<TabProps & LinkProps>;
export interface AppState {
value: number;
}
export class App extends React.Component<{}, AppState> {
constructor(props: Readonly<{}>) {
super(props);
this.state = {
value: 0,
};
}
handleChange = (event: any, value: any) => {
this.setState({ value });
};
render() {
const { value } = this.state;
return (
<div>
<AppBar position="static">
<Tabs value={value} onChange={this.handleChange} scrollable scrollButtons="off">
<LinkTab icon={<ListIcon />} component={Link} to="/monitor" />
<LinkTab icon={<RemoteControlIcon />} component={Link} to="/remote" />
</Tabs>
</AppBar>
</div>
)
}
};
ReactDOM.render(
<Router>
<div>
<App />
<Switch>
<Route exact path="/monitor" component={ MonitorContainer } />
<Route exact path="/remote" component={ RemoteContainer } />
<Redirect from="/" to="/monitor" />
</Switch>
</div>
</Router>,
document.getElementById("root")
);
推荐阅读
- angular - 在 Nativescript 中使用路由自动导航
- php - 并发请求中的 Laravel 数据库锁表
- python - 如何从 seaborn 安装 swarm plot?
- ionic3 - “对象”类型上不存在属性“地图” - Ionic 3
- java - Java - 无法从 HashSet 获取唯一 ID
- c# - 我没有要求创建的表,我在 EF6 中的初始化策略有问题吗?
- php - 多维数组 - 按键合并和加法
- javascript - 将 PHP DateTime 格式转换为 Moment.js
- git - 在我的根文件夹中包含来自外部 Git 存储库的一些文件(它已经有一个本地存储库)
- postgresql - 如何从 dat.gz 文件恢复 PostgreSQL 数据库?