Question

<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。如果这是一个仍然有效的弃用道具，那么我还没能找到新道具的名称......请告知。如果没有别的我想隐藏警告（如何？）。

Answer 1

从Material UI 1.0开始，prop称为component：

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

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

有关Buttons的更多信息。

Answer 2

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

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

尝试一下，看看它是否有效

Answer 3

最简单的解决方案是将 IconButton 放在 Navlink 中，因此，无论何时单击图标按钮，都会自动单击 NavLink。

for example) 

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

通过containerElement prop将NavLink传递给Material UI组件会出现“Failed prop type”警告

3 个答案: