Material-ui: React 0.14와 호환되지 않는 Material-UI

@tleunen 당신은 공에 있습니다! React 0.14 베타가 오늘 출시되었습니다.

@ hai-cea 몇 가지 문제를 살펴 봤습니다 (21 개 파일에서 ~ 50 개를 찾았습니다). 이것은 이정표를위한 좋은 기회가 될 수 있습니다. dialog / dialog-window / overlay 파일을보고 있었는데 this.refs.xxx.yyy ()를 통한 많은 커플 링이 있으므로 간단한 작업이 아닐 수 있습니다. React 0.14 호환성 이정표를 만들고 싶다면 저에게 알려 주시면 문제를 작성하는 데 도움을 드릴 수 있습니다 ( @tleunen 이 참여하고 싶어 할 것입니다-저는 그를 지원하고 싶지 않습니다).

감사합니다 @tleunen!

동의합니다. 이로 인해 문제가 발생할 수 있습니다. 대안은 무엇입니까? 렌더 내부의 변수에 요소를 저장 하시겠습니까?

@jkruder 당신은 gitter에 있습니까 - https://gitter.im/callemall/material-ui ? 저에게 IM을 보내 주시면 문제 / 이정표를 정리하는 데 공을 들일 것입니다.

대부분의 경우 구성 요소에는 공용 기능이 없어야합니다. 모든 것은 소품과 함께 전달되거나 마운트 될 때 전달되어야합니다.

예를 들어 Dialog 구성 요소에는 show 및 hide 가 필요하지 않습니다. 돔에 있으면 표시되고 그렇지 않으면 표시되지 않습니다.

저는 Material-UI 사용을 막 시작하고 있으므로 다른 구성 요소의 문제를 잘 모르지만 대부분의 경우 공용 기능을 갖지 않도록 다시 작성할 수 있다고 생각합니다 (어쨌든 다른 선택 사항은 없습니다).
문제는 현재 버전에서 큰 변화가 될 것입니다.

@tleunen 대화 표시 및 숨기기 방법에 대해 더 이상 동의 할 수 없습니다.

@tleunen @oliviertassinari 네 , 둘 다 동의합니다. 이것은 우리가 그 구성 요소를 디자인 할 때 가졌던 논쟁이었습니다. 우리가 가진 문제는 클릭 어웨이 기능이었습니다. 열기 / 닫기 상태에서 처리 된 경우 클릭 어웨이시 자체적으로 닫히는 것에 대해 걱정할 수 있습니다. 열기 / 닫기가 소품으로 전달되면 대화를 사용하는 모든 사람이 직접 클릭을 처리해야합니다.

이제 중간 해결책은 대화 상자에 onClickAway 소품을 추가하고 구성 요소의 사용자가 열거 나 닫을 수 있도록하는 것입니다.

@ hai-cea https://github.com/rackt/react-modal 과 동일한 접근 방식을 사용하는 것이 좋습니다

어떤 다른 것은 것은이 라이브러리를 사용하지 this.refs 말보다 DOM 구성 요소와 상호 작용할 때에 getDOMNode() ? 이 React의 변경 사항은 <div/> 및 <i/> 와 같은 구성 요소에만 적용되지 않습니까? 사용자 지정 구성 요소는 평소와 같이 this.refs.xxx 계속 액세스 할 수 있습니다. 내가 틀렸다면 정정하십시오. 아직 React 0.14를 시도하지 않았지만 HackerNews에서 이와 동일한 문제가 발생했습니다.

React가 ref가 사용자 정의 구성 요소에 있음을 감지하면 구성 요소 내부의 DOM 요소 대신 구성 요소를 반환한다는 의미입니까?

@tleunen 내 이해입니다. 확인 필요 :)

@mull 그럴 경우 아주 좋을 것입니다. :)

@ hai-cea @mull @tleunen 방금 빠른 테스트를 실행하고 사용자 정의 (React.Component를 확장하는 것) 구성 요소 (this.refs.customComponent)에 대한 ref는 기본 DOM 노드가 아닌 React 구성 요소에 대한 참조를 반환합니다. DOM 노드 (div / a / img / etc)에 대한 참조가있는 경우 this.refs.domRef는 노드를 반환합니다.

@ hai-cea 즉, this.refs.XXX에서 메서드를 호출하지 않는 것이 좋습니다.

@jkruder 감사합니다.

ok @jkruder를 조사해 주셔서 감사합니다. 이 문제를 해결하기 위해 저장 한 것 같습니다. 그래도 0.14 마일스톤을해야한다고 생각 해요?

그리고 # 1033에 대해 어떻게 생각하세요?

그러면 닫을 수있을 것 같습니다. 그러나 일부 구성 요소를 다시 작성하여 함수를 호출 할 필요가 없도록하는 것이 좋습니다. 구성 요소가 작동하는 방식이 아닙니다.

@ hai-cea 동의합니다. 피드백을 위해 보내드릴 0.14 마일스톤에 대한 제안 된 작업의 초안을 작업 중입니다.

# 1033에 관해서는 우리가 아직 점프를해야한다고 생각하지 않습니다. 저는 MUI를 변환 할 수있는 별도의 분기를 만들어 0.14에 대해 제안 된 것과 호환되도록하고 구성 요소를 더 기능적으로 만들 수 있습니다 (this.refs.XXX.YYY () 최소화 / 제거).

this.ref.xxx의 현재 사용이 react 0.14.0-beta1과 함께 사용될 때 실제로 material-ui를 깨지 않는 경우 해당 패턴에서 벗어나고 싶은 바람이 # 1033을 차단해야한다고 생각하지 않습니다. react 0.14.0-beta1과 함께 material-ui를 더 쉽게 설치할 수 있도록함으로써 발생할 수있는 실제 문제에 대한 초기 피드백을받을 수 있습니다. 0.14가 아직 베타 버전 일 때 피드백을받는 것이 좋습니다.

(기대를 더 잘 관리하는) 좋은 대안은 npm에서 0.14.0을 동료 종속성으로 갖는 material-ui의 알파 / 베타 / rc 버전을 릴리스하는 것입니다 (그리고 material-ui 0.14 호환 가능). 이렇게하면 사람들이 앞으로 나아갈 수 있고 존재할 수있는 문제를 찾기 / 수정하기가 더 쉬워집니다.

@jkruder 이것에 대한 업데이트가 있습니까?

@ashtonwar 아직 없음-일부 테스트를 설정하고 일부 외부 약속을 해결하는 데 집중하고 있습니다. 이번 주에 그것을 살펴보고 우리가 무엇을하고 있는지 볼 시간이 있어야합니다. 일부는 이미 0.14로 마이그레이션을 시도했습니다.

이것을보고 건배. # 1033에서 material-ui-io 봤어요. 일부 구성 요소 (드롭 다운, 버튼, 스낵바)에서는 작동하는 것처럼 보이지만 다른 구성 요소 (체크 박스, 슬라이더, 토글)에서는 넘어지고 죽습니다. 다른 마이그레이션 시도를 알지 못합니다.

@tleunen 우리는 여전히 this.refs.XXX 를 커스텀 컴포넌트로 사용할 수 있습니다. @jkruder 감사합니다.

문제 없어요; 나는 여전히 가능한 경우 this.refs.doSomething() 사용을 피하는 것이 가장 좋다고 생각합니다.

업데이트가 있습니까? React JS 0.14 RC 1이 방금 출시되었으며 Material-UI를 함께 사용하고 싶습니다.

여기서도 14 로의 마이그레이션을 지원할 수있는 방법이 있습니까?

프로덕션에서 material-ui-io를 사용 하고 있습니다. 괜찮아 보입니다.

그래서 저는 material-ui-io를 게시 한 사람이고 material-ui를 포팅하는 것은 매우 거칠고 슬픈 시도였습니다.

이 라이브러리를 프로덕션에 사용하지 않는 것이 좋습니다! 나는 머티리얼 UI를 테스트하기 위해 포트를 만들고 하루 만에 게시했지만 결국 mdl 위에 내 라이브러리를 만드는 것으로 전환되었습니다.

우리 모두가 React 14에서 material-ui를 검사하는 데 도움을 줄 수있는 가장 좋은 방법은 React 14-rc1로 업그레이드하고 개별적으로 발생하는 문제를보고하는 것입니다. 문제 제목을 "React 14-rc1 :이 특정 오류가 발생합니다 ...."로 시작하거나 문제에 적절한 레이블로 태그를 지정하는 것이 좋습니다.

하지만 그렇지 않을 수도 있습니다.이 경우 수석 관리자가 저를 수정하기를 바랍니다.

https://github.com/callemall/material-ui/pull/1647

peer-deps vs dev-deps vs deps와 관련하여 약간의 수정이 필요할 수 있으며 보류중인 터치 이벤트에 문제가 있습니다.

React 0.14에서는 onTouchCancel, onTouchEnd, onTouchMove, onTouchStart가 자동으로 작동합니다. https://facebook.github.io/react/blog/#breaking -changes를 참조
react-tap-event-plugin없이 onTouchTap을 활성화하려면 :

import EventPluginHub from 'react/lib/EventPluginHub';
import TapEventPlugin from 'react/lib/TapEventPlugin';
EventPluginHub.injection.injectEventPluginsByName({ TapEventPlugin });

iOS Safari의 300ms 지연이 여전히 있습니까?

IOS가 없습니다 ...
그러나 첫 번째 게시물 https://github.com/facebook/react/issues/436 에서는 TapEventPlugin 주입이 해결책으로 제안됩니다.
그 외에도 https://github.com/facebook/react/commit/ff12423d639413c1934dfc2ff337b298952e99ef 관련 커밋을 찾았습니다.

React 14를 지원하는 임시 일정이 있나요 ?? 이 문제는 정말 오래되었고 곧 해결된다면 좋을 것입니다!

나도이 UI 툴킷을 사용하고 Bootstrap, Foundation, 심지어 Elemental UI를 피할 수있어서 정말 기뻤지 만 Redux와 함께 React 0.14를 사용하고 있으며 0.13으로 돌아 가지 않을 것입니다. 업데이트까지 얼마나 걸리나요?

또한이 정보를 요청 / 제공 할 자격이 있는지 확실하지 않지만 refs와 관련하여 (이것이 0.14인지 또는 0.12 / 0.13인지 확실하지 않음) 일반적으로 양식 입력 요소에 다음을 추가합니다.

내 onclick (또는 모든 핸들러) 코드에서 this.name.value를 통해 값에 액세스 할 수 있습니다. 입력 값을 매우 쉽게 얻을 수 있습니다. 이것이 작업 참조로 툴킷을 업데이트하는 데 필요한 모든 것입니까?

이것에 +1. 오늘 material-ui를 찾았고 그것을 시도하게되어 정말 기뻤습니다! 불행히도 주사위는 없습니다.

+1. 이 업데이트의 타임 라인도 알고 싶습니다!

: +1 :

우리는 거기에 가고 있습니다! # 1751을 참조하십시오. 이 시점에서 새로운 react-router API로 업그레이드하려면 약간의 작업이 더 필요합니다.

react-0.14-support 브랜치를 사용해보고 제목에 [React0.14] 접두사가있는 문제를보고하는 것이 좋습니다. 분기가 완전히 작동하게되면이 문제를 종료하겠습니다 (마지막으로!) :)

듣기 좋은! 최종 버전을 기대하십시오. 나는 함께 일 해왔다
Redux, React, react-router, 그리고 지금까지는 꽤 좋은 방법입니다. 보기
머티리얼 UI를 여기에 통합하는 것입니다.

2015 년 9 월 29 일 화요일 오후 1:31, Shaurya Arora [email protected]
썼다 :

우리는 거기에 가고 있습니다! # 1751 참조
https://github.com/callemall/material-ui/pull/1751. 이 시점에서
새로운 react-router api로 업그레이드하려면 더 많은 작업이 필요합니다.

react-0.14-support 브랜치를 사용 해보고보고하는 것이 좋습니다.
제목에 [React0.14] 접두사가있는 문제

—
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/callemall/material-ui/issues/1030#issuecomment -144183104
.

멋있는! 뭐라도 문제가 있으면 ...

React 0.14 지원 출시일에 대한 소식이 있습니까?

@amagdas react-0.14-support 지점에 대해 알고 계십니까? 지속적인 노력입니다. 자유롭게 테스트하고 [React0.14] 접두사가있는 문제를보고하세요.

@ shaurya947 예, 알고 있지만 npm을 사용하여 분기를 설치할 수 없습니다. 다시 시도하십시오.
react 0.14를 사용하여이 브랜치를 테스트하는 방법에 대한 일종의 Readme / wiki가 있으면 좋을 것입니다.

클론에서 npm link 하거나 프로젝트에서 npm i 'git://github.com/callemall/material-ui#react-0.14-support' 를 수행 할 수 있습니다.

명확하게하려면 node_modules 디렉토리에 npm 설치를 수행해야합니다.
디렉토리의 루트가 아닙니다.
2015 년 10 월 2 일 08:01에 "Chia-liang Kao" [email protected]이 작성했습니다.

클론에서 npm 링크를하거나 npm i 'git : //
github.com/callemall/material-ui#react-0.14-support '를 프로젝트에 추가합니다.

—
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/callemall/material-ui/issues/1030#issuecomment -145051787
.

@amagdas 이 브랜치는 아직 몇 가지 문제가 있고 진행중인 작업이므로 npm에 아직 없습니다.

@clkao가 말한 것을 수행하거나 시스템에서 저장소를 복제 한 후 git checkout react-0.14-support 사용하여 react-0.14-support 브랜치로 전환 할 수 있습니다.

그 후 루트 디렉토리에서 npm i 를 실행하면 모든 소스 파일이 lib 폴더로 컴파일됩니다. 그런 다음 프로젝트에서이 lib 폴더를 사용할 수 있습니다.

네,이 작업을 수행하고 작동하면 피드백을 줄 것입니다.

이 FB 도구를 활용하여 자동으로 변경하는 것은 어떻습니까? https://github.com/facebook/react/blob/master/packages/react-codemod/README.md

react 0.14 Announce (http://facebook.github.io/react/blog/2015/10/07/react-v0.14.html)에서 "주요 버그 수정"을보십시오.
"클릭 이벤트는 특히 모바일 Safari에서 모바일 브라우저에서 React DOM에 의해 더 안정적으로 처리됩니다."
...

@kinolaev 자세한 내용 : https://github.com/callemall/material-ui/pull/1732#issuecomment -143478944

react-0.14-support 제거 되었습니까?

@ovaris 나는 마스터로 병합되었습니다.

@oliviertassinari는 언제 npm에서 사용할 수 있습니까?

npm에서 사용할 수있는시기

버그없는 버전이 언제 나올지 모르겠습니다. 그러나 npm으로 마스터 브랜치를 시도 할 수 있습니다.

최신 릴리스 v0.13.0으로 수정되어야합니다.
도움을 주신 evreybody에게 감사드립니다.

@oliviertassinari 감사합니다!

감사합니다!

이 문제가 material-ui의 최신 버전에 여전히 존재한다면 어떤 아이디어? 대부분의 구성 요소를 사용할 수 있지만 this.refs.xxx를 사용하는 구성 요소는 사용할 수 있습니다.예를 들어 DatePicker 구성 요소를 사용하려고하면 "Undefined의 'show'속성을 읽을 수 없습니다."라는 오류가 발생하고 여기서 undefined는 this.refs.dialogWindow입니다.

반응 0.14.8 및 material-ui 0.14.4 ...

같은 오류

material-ui가 React 0.14.8 및 0.14.9에서 작동하지 않는 것처럼 보이며 한심합니다.
Webpack은 내 콘솔에서 많은 이상한 불만을 제기합니다. 무엇을 해야할지 이해하지 못합니다.

@ topgun743 여기서 훌륭한 작품 ( 무료로 제공됨)을 한심하게 묘사하는 것은 매우 상처받습니다.

이 문제는 15-UI 재료와 호환되는 발표 된 반응 열리고 나서. 프로젝트 내에서 React를 업그레이드하는 것이 좋습니다.