Material UI Tab 将道具传递给组件答案

【问题标题】：Material UI Tab pass props to componentMaterial UI Tab 将道具传递给组件
【发布时间】：2018-11-24 13:30:33
【问题描述】：

我正在尝试将 react-router 与 Material-UI V1 选项卡集成，如 this github issue、this stackoverflow post，它们为我提供了错误的答案。

据我了解，这就是您应该执行的方式：

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 组件根本不会渲染。

想法？

【问题讨论】：

试试这个例子：codesandbox.io/s/04p1v46qww

标签： reactjs typescript react-router material-ui

【解决方案1】：

问题的根源在于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")
);

【讨论】：

对 <MenuItem> 和 <Link> 做了同样的事情，但不幸的是，它没有捕获菜单的 CSS :( 仍然是一个绝妙的技巧。const MenuItemLink: React.ComponentType< MenuItemProps & LinkProps > = MenuItem as React.ComponentType< MenuItemProps & LinkProps >

【解决方案2】：

我有同样的问题，最后我的解决方案是将<Tab> 替换为<Link>：

<AppBar>
  <Link to="/links" className={styles.tabButton}>Links</Link>
  <Link to="/docs" className={styles.tabButton}>Docs</Link>
  <Link to="/videos" className={styles.tabButton}>Videos</Link>
</AppBar>
<Switch>
  <Route path="/links" component={MediaLinks} />
  <Route path="/docs" component={MediaDocs} />
  <Route path="/videos" component={MediaVideos} />
</Switch>

【讨论】：