Material-ui: React 15.0.2 "Unknown props onTouchTap" 경고

PR을 보내고 싶지만 지금은 변경 사항을 테스트하는 방법과 변경 사항으로 인해 경고가 수정되는지 모르겠습니다.

Yeoman Webpack 및 react: ^15.2.1 사용

Warning: Unknown prop `onTouchTap` on <button> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in button (created by EnhancedButton)
    in EnhancedButton (created by RaisedButton)
    in div (created by Paper)
    in Paper (created by RaisedButton)
    in RaisedButton (created by MyButton)
    in div (created by MyButton)
    in MyButton (created by AppComponent)
    in div (created by AppComponent)
    in MuiThemeProvider (created by AppComponent)
    in AppComponent

간단한 것에서:

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

export default class MyButton extends React.Component {

  render() {
    return (
      <div>
        <RaisedButton>
          Hello, world!
        </RaisedButton>

      </div>
    );
  }
}

패키지.json:

{
  ...
  "devDependencies": {
    ...
    "core-js": "^2.0.0",
    "material-ui": "^0.15.2",
    "normalize.css": "^4.0.0",
    "react": "^15.2.1",
    "react-dom": "^15.0.0",
    "react-tap-event-plugin": "^1.0.0"
  }
}

다음을 추가하여 수정되었습니다.

// Needed for onTouchTap
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

구성 요소에.

추가하고 싶습니다: transitionAppearTimeout

warning.js:44 Warning: Unknown prop `transitionAppearTimeout` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by ReactTransitionGroup)
    in ReactTransitionGroup (created by DialogInline)
    in div (created by DialogInline)
    in DialogInline
    in MuiThemeProvider

Dialog 에만 나타남

업데이트: 신경 쓰지 마세요. 15.0.0 반응과 함께 15.2.1 가 사라졌습니다. 나는 그들이 몇 가지 소품을 잊어 버린 것 같아요.

나는 클라이언트와 서버 모두에서 injectTapEventPlugin() 를 호출하지만 여전히 다양한 요소와 함께 많은 경고를 받습니다.

버전:

"material-ui": "0.15.2",
"react": "15.2.1",
"react-dom": "15.2.1",
"react-tap-event-plugin": "1.0.0",

일부 경고:

Warning: Unknown prop `onTouchTap` on <label> tag. 
Warning: Unknown props `displayBorder`, `columnNumber`, `hoverable`, `onHover`, `onHoverExit` on <td> tag.

@igl ReactDOM.render injectTapEventPlugin() 를 호출하려고 합니다.

@ixrock : $ ReactDOM.render injectTapEventPlugin() 를 호출해도 문제가 해결되지 않습니다(적어도 저에게는 해당되지 않음).

@기리고 로 같은 문제 =\

vendors.js:20314 Warning: Unknown prop `onTouchTap` on <button> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in button (created by EnhancedButton)
    in EnhancedButton (created by RaisedButton)
    in div (created by Paper)
    in Paper (created by RaisedButton)
    in RaisedButton
    in MuiThemeProvider

렌더 전후에 injectionTapEventPlugin() 사용 여부에 관계없이. 아이디어가 있습니까?

@tavurth 의 제안을 추가하고 오류를 제거했습니다.
나는 성공적으로 다음 장소에서 그것을 시도했습니다.

• 오류를 생성하는 구성 요소에서
• 경로 파일
• app.js 파일
• ReactDOM.render가 호출되는 파일

나는 그것을 ReactDOM.render 파일에 배치하기로 결정했습니다.

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

prop titleStyle이 있는 CardTitle에서 동일한 오류가 표시됩니다...

warning.js:44 Warning: Unknown prop `titleStyle` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by CardTitle)
    in CardTitle (created by GroupAdmin)
    in div (created by Card)
    in div (created by Paper)
    in Paper (created by Card)
    in Card (created by GroupAdmin)
    in span (created by GroupAdmin)
    in GroupAdmin (created by Operations)

코드 조각: <CardTitle title="Group Admin" titleStyle={styles.title}/>

머티리얼 UI 버전: 0.15.2

정말 고마워.

안녕하세요,

내 것이 관련되어 있는지 확실하지 않지만 <Chip> 을 사용할 때 이 오류가 발생합니다.

Unknown prop labelColor on <div> tag.

나를 위해 동일 :

경고: 태그 에 알 수 없는 translate 소품이 있습니다. 요소에서 이 소품을 제거합니다.

그리고 나는 추가합니다 :

import injectTapEventPlugin from 'react-tap-event-plugin';

injectTapEventPlugin();

그리고 그것은 작동하지 않습니다 👎

같은 경고가 있습니다. 몇 가지 디버깅 후에 이 코드에서 발생한다는 것을 발견했습니다.

const MenuLeftItem =
  ({text,url}) =>
    <ListItem
      className="menuleft-module-item"
      primaryText={text}
    />

그리고

<AppBar
   title="Admin Panel"
   iconElementLeft={
      <IconButton>
         <NavigationClose />
      </IconButton>
    }
     onClick={onCollapse}
  />

이것은 내 package.json입니다.

"dependencies": {
    "brace": "^0.8.0",
    "d3": "^4.2.2",
    "deepmerge": "^0.2.10",
    "dom-value": "^1.0.1",
    "form-controls": "^1.0.0",
    "form-parse": "^0.1.0",
    "form-urlencoded": "^1.2.1",
    "formsy-material-ui": "^0.5.0",
    "formsy-react": "^0.18.1",
    "is-submittable": "^1.0.0",
    "isomorphic-fetch": "^2.2.1",
    "js-beautify": "^1.5.10",
    "lodash": "^4.14.1",
    "material-ui": "^0.15.4",
    "muicss": "^0.7.3",
    "query-string": "^4.2.2",
    "radium": "^0.18.1",
    "rd3": "^0.7.1",
    "react": "^15.3.1",
    "react-ace": "^3.1.0",
    "react-diff": "0.0.6",
    "react-dimensions": "^2.0.0-alpha1",
    "react-dom": "^15.3.1",
    "react-edit-inline": "^1.0.6",
    "react-graph-vis": "0.0.3",
    "react-hotkeys": "^0.9.0",
    "react-modal": "^1.4.0",
    "react-notification": "^6.1.0",
    "react-redux": "^4.0.6",
    "react-router": "^2.6.1",
    "react-syntax-highlighter": "^2.0.3",
    "react-tap-event-plugin": "^1.0.0",
    "reactable": "^0.14.0",
    "recompose": "^0.20.0",
    "reduce": "^1.0.1",
    "redux": "^3.0.6",
    "redux-actions": "^0.11.0",
    "redux-localstorage": "^0.4.0",
    "redux-saga": "^0.11.0",
    "redux-thunk": "^2.1.0",
    "reduxerit": "^0.4.1",
    "reselect": "^2.0.3",
    "sha1": "^1.1.1",
    "sleep-promise": "^2.0.0",
    "squares": "^0.2.1",
    "uuid": "^2.0.2",
    "vis": "^4.16.1"
  }
}

injectTapEventPlugin() 를 추가해도 문제가 해결되지 않았습니다.
나는 그것이 반응 HMR 플러그인과 관련이 있다고 생각합니다.

반응의 UMD 버전 사용에서 모든 것을 webpack-ing으로 전환하여 이 문제를 해결했습니다. react-tap-event-plugin 및 material-ui의 일부 콤보가 React의 비공개 내부에 도달해야 하고 UMD 버전에서는 이 작업을 수행할 수 없기 때문에 이것이 수정될 것이라고 생각합니다. 한숨을 쉬다...

오버레이에 대해 동일한 경고가 있습니다.

Warning: Unknown prop `onTouchTap` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by Overlay)
    in Overlay (created by DialogInline)
    in div (created by DialogInline)
    in DialogInline

또한 여기 https://github.com/facebook/react/issues/436 에서 react-tap-event-plugin이 반응 15 이후 제거될 수 있다는 것을 읽었습니다. 조사가 필요합니다.

@tavurth에 의해 근본 문제가 식별되었으므로 이 문제를 종료합니다. 감사 해요!

우리는 onTouchTap 속성을 추가하기 위해 react-tap-event-plugin 에 의존합니다.
사실, React가 이 경고를 추가해서 기쁩니다. 문서에서 이 요점을 놓치는 많은 사람들에게 도움이 될 것입니다.

앞으로 next 분기에서 이 종속성을 제거할 계획입니다.
최신 모바일 장치가 더 잘 지원하기 때문에 onClick 이벤트를 사용합니다(지연 없음).

나는 AppBar를 사용하고 있었고 다음은 위의 주석에 따라 이 문제를 해결하는 데 사용하는 코드입니다.

const Header = React.createClass({
handleClick(e){
console.log("reached here::");
},
render(){
injectTapEventPlugin();
return <AppBar title="Some Heading" onTitleTouchTap={this.handleClick()}/>
}
});

export default Header;

이 문제를 발견하고 수정 사항을 적용하고 문제가 지속되는 저와 같은 사람들을 위해: injectTapEventPlugin() 실행에 대한 제안된 접근 방식은 WebPack을 사용하는 경우에만 작동합니다. 내 앱을 browserify에서 webpack으로 변경하고 코드를 변경하지 않았으며 오류가 사라졌습니다.

누구든지 여기에 무엇을 위해 주입 탭 이벤트 플러그인()이 있는지 말해 줄 수 있습니까?

@jakewins : 나는 browserify와 같은 문제가 있었습니다. 문제는 내가 전체 클라이언트 코드로 vendor.js와 하나의 js 파일을 만들고 있다는 것입니다. 나는 react-event-tap-plugin이 당신의 react lib가 있는 js 파일 안에 번들되어야 한다는 것을 알게 되었습니다. 이 접근 방식은 browserify의 문제를 해결했습니다.

같은 문제입니다. @vaspoz

react-tap-event-plugin이 ^2.0.0까지 올라가고 반응이 15.4.0에 도달하는 것과 관련이 있는 것 같습니다. UMD 빌드를 사용하고 ReactDOM.render 이전에 injectTapEventPlugin을 호출하고 있습니다.

비 UMD 빌드를 사용하는 것은 불행히도 옵션이 아닙니다.

react + react-tap-event-plugin + material-ui의 UMD 버전 조합이 작동하는 사람이 있습니까?

@oliviertassinari 더 많은 네이티브 onClick이 있는 다음 브랜치를 사용해도 충분히 안정적일까요? 반쯤 사용할 수 있는 한 많은 것이 망가져도 상관 없습니다.

더 많은 네이티브 onClick이 있는 다음 분기를 사용하는 것이 충분히 안정적입니까?

@vans163 다음은 next 분기의 1개월 된 버전입니다. http://material-ui-next.azurewebsites.net/. 안정이 무엇을 의미하는지에 따라 다릅니다.
필요한 경우 API가 변경됩니다. 일부 구성 요소만 마이그레이션되었으며 종종 부분적으로 마이그레이션되었습니다. 그래도 이 분기를 100% 사용하도록 앱을 마이그레이션하고 있습니다.

새 릴리스가 준비될 때까지 누군가에게 도움이 되는 경우를 대비하여: 이 문제가 발생했지만 일단

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

구성 요소 계층에서 <MuiThemeProvider> 를 적용하는 구성 요소 파일에 줄을 추가하면 작동하기 시작했습니다. (또한 redux에 대한 mapStateToProps를 수행하는 곳이기도 하지만 관련이 없다고 가정합니다.) 이전에 래핑 구성 요소 역할을 하는 상위 구성 요소의 파일에 적용한 적이 있습니다.

create-app-react 에서 꺼낸 웹팩을 사용하고 있습니다.

@rdnewman 작동합니다!!

정말 고맙습니다!

모두 감사합니다 ... 테스트에서만이 경고가 있었고 구성 요소를 테스트하는 과정에서 injectTapEventPlugin() 가 호출되지 않고 완전한 앱에서만 호출되었음을 깨달았습니다.

@rdnewman , 감사합니다! 당신의 방법이 작동합니다. 나는 그것을 ReactDOM.render 메소드 파일이 포함된 index.js 파일에 넣었고 그것은 또한 그렇게 작동했습니다. 👍

지난 주에 create-react-app 를 사용하여 이것이 나왔습니다. React는 15.4.x에 들어왔고 이 오류는 injectTapEventPlugin() 적절하게 호출했음에도 불구하고 발생합니다. 이것은 react-tap-event-plugin #85 에서 논의됩니다. 2.0.0 react-tap-event-plugin 를 수동으로 저장/설치하면 이 문제가 해결되었습니다.

typescript를 사용하는 누군가를 돕기를 바랍니다.
typescript와 함께 material-ui를 사용하고 있는데 동일한 문제가 있습니다.
추가 후
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
ReactDOM.render 전에 코드에서 오류가 발생합니다.

잡히지 않은 TypeError: react_tap_event_plugin_1.default는 함수가 아닙니다.

가져오기 스타일을 변경하여 해결되었습니다.
import * as injectTapEventPlugin from 'react-tap-event-plugin';

감사합니다. 요즘에는 react-tap-event-plugin 버전 2.0.1과 react 15.4.2만 설치하면 됩니다. 그런 다음 앱을 렌더링하는 파일로 이동하여 다음 두 줄만 포함하면 됩니다.

'react-tap-event-plugin'에서 injectTapEventPlugin을 가져옵니다.
주입탭이벤트플러그인();

그리고 바로 👍

@erick2014 네 : http://www.material-ui.com/#/get-started/installation

답답할 정도로 모호한 문제. SSR 시나리오에서 일부 코드 재구성을 수행한 후 돌아왔습니다.

"반응"의 경우: "15.4.2",

"react-tap-event-plugin": "^2.0.0" 또는 react-tap-event-plugin": "^2.0.1"을 사용하세요.

그리고 이것을 추가
// onTouchTap에 필요

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

injectionTapEventPlugin() 가져오기 및 추가로 내 문제가 해결되었습니다.

import injectTapEventPlugin from 'react-tap-event-plugin;

componentWillMount(){
    injectTapEventPlugin();
    }

Next.JS를 사용하고 있습니다.

이 솔루션은 작동하지 않습니다. 각 페이지를 가져오는 tap_events.js 파일이 있습니다.

내 파일 tap_events.js:
'react-tap-event-plugin'에서 insertTapEventPlugin 가져오기
if (창 유형 !== '정의되지 않음') 주입TapEventPlugin()