Material-ui: 用来自 react-router 的链接包裹的按钮在 Safari 中不起作用

@mariusk你能告诉我你是如何将 Link 组件从 react-router 添加到 Button 组件的。 例如，如果我执行以下操作，则它不起作用。

let editLink = <Link to="editTopic"/>;
<IconButton
    linkButton={true}
    onTouchTap={editLink}
    tooltip="Edit forum">
    <i className="material-icons">edit</i>
</IconButton>

我注意到如果我添加linkButton={true}我需要将路由添加到href元素，但是 react router Link 默认生成锚标记。

这是实际的代码：

 <Link to="/login"><FlatButton onTouchTap={this.clickHandler}>{l.l('no', 'Sign in')}</FlatButton></Link>

如果没有 onTouchTap 处理程序，它可以在 Chrome 中运行，但不能在 Safari 中运行。 使用显式处理程序（它再次调用 react-router 的transitionTo(...)它也适用于 safari。

这可能是因为 FlatButton 生成了一个<button />元素，我相信<Link />生成了一个<a />元素。 所以你会有：

<a><button /></a>

我能想到的一种解决方案是更改 Enhanced-button 以接受允许用户自定义容器元素的元素道具。 所以你将能够做到：

<FlatButton containerElement={<Link to="/login"/>} />

你是对的; a 元素内的按钮无效 html5。 另一种可能的解决方案是让按钮样式可用于a元素（除了button ），然后使用className对其进行简单样式化。

实际上，使用#846，您将能够执行以下操作：

<FlatButton>
  <Link to="/login/" />
</FlatButton>

我刚刚测试了#846。 它破坏了样式（按钮文本为白底白字），并且链接未激活（不起作用）。 这是我测试的实际代码：

<FlatButton><Link to="/login">{l.l('no', 'Sign in')}</Link></FlatButton>

除了颜色问题（由我自己的样式引起）以及链接仍然无效的事实之外，还有一个焦点问题。 将鼠标悬停在嵌入的a链接上时，只会突出显示链接部分，而不是整个按钮。

@mariusk您现在应该可以这样做：

<FlatButton
  containerElement={<Link to="/login" />}
  linkButton={true}
  label={l.l('no', 'Sign in')}/>

看起来和工作完美，谢谢，伟大的工作！

当我切换到这个时，我收到了 EventEmitter 内存泄漏警告。 我不确定是<Link>上的点击处理程序还是<EnhancedButton>上的点击处理程序没有被正确删除？ 也许<Link>没有被正确卸载？

看起来它现在即使没有linkButton={true} ，对吗？ 当按钮有Link的containerElement它会变成<a>元素而不是<button> ？

@hai-cea 不错，谢谢！
@antoinerousseau是的，变成<a> ，打破了一种风格......原本设置为text-align: center的文本变成了 left ..因为它现在是一个<a>元素

没有记录 containerElement :(

我看到这个设置（例如RaisedButton宽度containerElement={<Link to="/register>}有 CSS 问题。涟漪效果没有正确触发，实际上它正在触发但是延迟太多我几乎看不到它（直到我点击更长的这样的按钮）。我使用的是 v0.15.4。

任何提示如何加快速度？

不再工作

警告：标签上的未知道具linkButton 。

@wzup只是删除linkButton={true}

@wzup如果您在没有 linkBut​​ton 道具的情况下编写这样的代码，它应该可以工作。

<FlatButton
  containerElement={<Link to="/login" />}
/>

@hai-cea，
你好，

我怎样才能在登录页面上创建一个功能 [比如模态功能] 弹出，在上面的代码中，一旦它在按钮点击后导航

请原谅颠簸，但以下内容仍会在 0.17 上生成警告：

<RaisedButton
      label="Sign In"
      containerElement={<Link to="/login" />}
/>

生成以下内容：

警告：标签上的未知道具onTouchTap 。 详情见https://fb.me/react-unknown-prop

我遇到了同样的问题，所以我创建了一个适合我的可重用组件。

import React from 'react';
import {Component, PropTypes} from 'react';
import FlatButton from 'material-ui/FlatButton';

export default class FlatLinkButton extends Component {

    static propTypes = {
        ...FlatButton.propTypes,
        to: PropTypes.string.isRequired,
        link: PropTypes.func.isRequired,
        label: PropTypes.node.isRequired,
    };

    render() {
        const style = Object.assign({
            color: 'white',
            marginTop: '7px'
        }, this.props.style);

        const props = {
            ...this.props,
            style,
        };

        delete props.to;
        delete props.link;

        const Link = this.props.link;

        return (
            <Link to={this.props.to}>
                <FlatButton {...props}/>
            </Link>
        );
    }
}

用法：

import {Link} from 'react-router';
import FlatLinkButton from './FlatLinkButton';

<FlatLinkButton to="/login" link={Link} label="Login"/>

@MatthewEdge #4670 应该可以解决这个问题

在 Material UI v1.0.0-alpha20 中，这似乎对我不起作用：
<Button color="contrast" containerElement={<Link to="/login" />} linkButton={true} > Login </Button>

你好，

同样的问题，使用 v1.0.0-alpha21 进行原型设计并得到消息containerElement未知。 所以财产似乎下降了，我最终得到了这个解决方案：

<Button raised dense color="primary" onClick={() => this.props.history.push('/project/4711')}>
  <i className="fa fa-search fa-on-button" aria-hidden="true" />Search
</Button>

@HerrVoennchen使用最新版本v1.0.0-beta.3您应该能够做到：

const LinkWrapper = ({ ...props }) => (
  <Link {...props} />
)

然后使用包装器作为组件

<Button to={`/project/${id}`} component={LinkWrapper}>Go</Button>

感谢@HiroAgustin 的指点； 这似乎适用于v1.0.0-beta.3 ：

<Button
  color="primary"
  to={`/projects/${project.id}`}
  component={props => <Link {...props}/>}
>View</Button>

在1.0.0-beta.6使用@HiroAgustin和@hubgit的解决方案，我收到警告：

警告：Material-UI：请为组件属性提供一个类。
键盘焦点逻辑需要引用才能正常工作。

有什么建议？

@mht 对我来说，当我移除花括号时它起作用了：

<Button component={Link} to="/customers"> Customers </Button>

@limakayo但是当您想动态创建链接时，您会怎么做？

@mht 好问题，我现在用花括号进行了测试，效果很好，我不知道为什么

任何人都知道如何添加在 AppBar 的标题中？，我需要能够在“旅行社”的标题上添加一个链接

<AppBar title={"Travel Agency"} iconElementRight={ <div> <Link to="/customers" className="navbar"><FlatButton label="Customers" /></Link> <Link to="/tours" className="navbar"><FlatButton label="Tours" /></Link> </div> } />

我们可以像这样使用 v1-beta

<Button
  component={({...props}) => <Link to='/path' {...props} />}
>Path</Button>

我觉得 material-ui 还是老式的 ui 框架，找不到你能找到的所有按钮样式，或者简单的样式太多了，如果有人像我一样需要在低级别定制，最后我很满意'styled-components' 不需要更多关于 css、saas 等的信息，只需对纯组件做出反应......你失去了很多时间、天、小时，试图弄清楚如果有错误，如何或在哪里改变某些东西，或者等待未来发布..

@palaniichukdmytro感谢您的解决方案，但它打破了 BottomNavigationAction 中的波纹样式

这对我的 material-ui 按钮有用：
``
从“反应”导入反应
从“@material-ui/core/Button”导入按钮
从'react-router-dom'导入{链接}

const SubmitButton = () =>
类型=“提交”
全屏宽度
变体=“包含”
颜色=“主要”
组件={链接}
到=“/形式”
>
提交表格

尝试使用下面的代码呈现带有链接的按钮，但视图上没有呈现任何内容：

<Button
  component={() => (
    <Link
      to={{
        pathname: 'hello-there',
        state: {
          hello: 'HELLO THERE!',
        },
      }}
    />
  )}
  size="small"
  variant="contained"
  color="primary"
  fullWidth={true}
>
  HELLO BUTTON
</Button>

我还能如何使用 material-ui 将道具传递到下一条路线？

组件={() => (
到={{
路径名：'你好'，
状态： {
你好：'你好！',
},
}}
/>
)}
大小=“小”
变体=“包含”
颜色=“主要”
全宽={真}
>
你好按钮

我有同样的问题 - 有没有解决过这个问题？