Material-ui: 반응 라우터에서 링크로 래핑된 버튼이 Safari에서 작동하지 않음

@mariusk 반응 라우터에서 Button 구성 요소로 Link 구성 요소를 어떻게 추가했는지 알려주시겠습니까? 예를 들어 다음과 같은 작업을 수행하면 작동하지 않습니다.

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

linkButton={true} 를 추가하면 href 요소에 경로를 추가해야 하지만 반응 라우터 링크는 기본적으로 앵커 태그를 생성합니다.

실제 코드는 다음과 같습니다.

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

onTouchTap 핸들러가 없으면 Chrome에서는 작동하지만 Safari에서는 작동하지 않습니다. 명시적 핸들러(이는 다시 react-router의 transitionTo(...) 호출함)를 사용하면 사파리에서도 작동합니다.

FlatButton이 <button /> 요소를 생성하고 <a /> <Link /> 가 <a /> 요소를 생성한다고 생각하기 때문일 수 있습니다. 따라서 다음을 갖게 됩니다.

<a><button /></a>

내가 생각할 수 있는 한 가지 해결책은 사용자가 컨테이너 요소를 사용자 정의할 수 있도록 하는 요소 소품을 허용하도록 확장 버튼을 변경하는 것입니다. 따라서 다음을 수행할 수 있습니다.

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

네가 옳아; 요소 내부의 버튼은 유효한 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 있으면 <button> 아닌 <a> 요소로 바뀝니다.

@hai-cea 좋아요, thx!
@antoinerousseau 예, <a> 로 전환하고 한 스타일을 깨고 ... 원래 text-align: center 설정된 텍스트가 왼쪽으로 변경되었습니다. 지금은 <a> 요소입니다.

containerElement가 문서화되지 않았습니다 :(

이 설정(예: RaisedButton width containerElement={<Link to="/register>} 에 CSS 문제가 있습니다. Ripple 효과가 제대로 실행되지 않고 있습니다. 실제로 실행되지만 지연이 너무 커서 거의 볼 수 없습니다. 그런 버튼을 길게 탭하세요.) 저는 v0.15.4를 사용하고 있습니다.

속도를 높이는 방법에 대한 힌트가 있습니까?

더 이상 작동하지 않습니다

경고: 태그 에 알 수 없는 linkButton 소품이 있습니다.

@wzup 그냥 linkButton={true}

@wzup linkButton 소품 없이 이와 같이 코드를 작성하면 작동해야 합니다.

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

@하이-세아 ,
안녕하십니까,

버튼 클릭 후 탐색하면 위의 코드에서 로그인 페이지 [모달 기능을 말함]에 팝업 기능을 어떻게 만들 수 있습니까?

범프를 용서하지만 다음은 여전히 ​​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>

@HiroAgustin 및 @hubgit 의 솔루션을 사용하는 1.0.0-beta.6 에서 경고가 표시됩니다.

경고: Material-UI: 구성 요소 속성에 클래스를 제공하십시오.
키보드 포커스 로직이 올바르게 작동하려면 참조가 필요합니다.

어떤 제안?

@mh 중괄호를 제거하면 작동했습니다.

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

@limakayo 그런데 링크를 동적으로 생성하고 싶을 때 어떻게 하나요?

@mh 좋은 질문, 지금 중괄호로 테스트했는데 작동했는데 이유를 모르겠습니다.

누구나 추가하는 방법을 알고 있습니다.AppBar 제목에 'Travel Agency' 제목에 링크를 추가할 수 있어야 합니다.

<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 프레임워크에 속한다고 생각합니다. 여기에서 찾은 모든 버튼 스타일을 찾을 수 없거나 단순한 스타일이 너무 많습니다. 누군가 저와 같은 낮은 수준에서 사용자 정의해야 하는 경우 마침내 저는 만족합니다. '스타일 구성 요소'는 CSS, saas 등에 대해 더 이상 필요하지 않으며 순수한 구성 요소에 반응하기만 하면 됩니다. 버그가 있는 경우 변경 방법 또는 위치를 파악하려고 많은 시간, 일, 시간을 낭비했습니다. 향후 출시 ..

@palaniichukdmytro 는 솔루션에 감사하지만 BottomNavigationAction의 리플 스타일을 깨뜨립니다.

이것은 material-ui 버튼에서 저에게 효과적이었습니다.
```
'react'에서 React 가져오기
'@material-ui/core/Button'에서 버튼 가져오기
'react-router-dom'에서 { 링크 } 가져오기

const 제출 버튼 = () =>
유형 = "제출"
전체 넓이
변형 = "포함"
색상 = "기본"
구성요소={링크}
to="/form"
>
양식 제출

아래 코드를 사용하여 Link로 버튼을 렌더링하려고 시도했지만 뷰에 아무 것도 렌더링되지 않습니다.

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

material-ui를 사용하여 다음 경로로 소품을 전달할 수 있는 다른 방법은 무엇입니까?

구성 요소={() =>(
~에={{
경로 이름: '안녕하세요',
상태: {
안녕하세요: '안녕하세요!',
},
}}
/>
)}
크기="작은"
변형 = "포함"
색상 = "기본"
전체 너비={true}
>
안녕하세요 버튼

같은 질문이 있습니다. 이 문제를 해결한 적이 있습니까?