通过 containerElement 道具将 NavLink 传递给 Material UI 组件会给出“道具类型失败”警告答案

【问题标题】：Passing a NavLink to a Material UI component via the containerElement prop gives “Failed prop type” warning通过 containerElement 道具将 NavLink 传递给 Material UI 组件会给出“道具类型失败”警告
【发布时间】：2018-03-02 01:14:23
【问题描述】：

<RaisedButton containerElement={NavLink} to="/somewhere">
   Somewhere
</RaisedButton>

产生以下警告：

Warning: Failed prop type: Invalid prop `containerElement` supplied to `RaisedButton`.
in RaisedButton (at App.js:11)
in App (at index.js:23)
in Provider (at index.js:22)
in MuiThemeProvider (at index.js:21)

但 Navlink 正确呈现并在点击时重定向到 /somewhere。如果这是一个仍然有效的弃用道具，那么我无法找到新道具的名称......请告知。如果没有别的，我想隐藏警告（如何？）。

【问题讨论】：

标签： reactjs react-router material-ui

【解决方案1】：

我认为你需要给它标记containerElement，像这样（而不仅仅是元素的名称）

containerElement={<NavLink to="/home" />}

试试看它是否有效

【讨论】：

【解决方案2】：

从 Material UI 1.0 开始，该道具被称为component：

import { Link } from 'react-router-dom'
import Button from 'material-ui/Button';

<Button component={Link} to="/open-collective">
  Link
</Button>

更多关于Buttons。

更新：

从 Material UI v4 开始，您可能需要使用 forwardRef 并将 Link 包装成 div：

const LinkRef = React.forwardRef((props, ref) => <div ref={ref}><Link {...props} /></div>)

<Button component={LinkRef} to="/open-collective">
  Link
</Button>

更多here.

【讨论】：

这个解决方案破坏了按钮的样式

【解决方案3】：

最简单的解决方案是将 IconButton 放在 Navlink 中，这样每当您点击 Iconbutton 时，就会自动点击 NavLink。

以下是代码示例：

<NavLink to="/" style={{ textDecoration: "none" }}>
  <IconButton>
    <Typography>Home</Typography>
  </IconButton>
</NavLink>

【讨论】：