Material-ui: 15.0.2「UnknownpropsonTouchTap」の警告に対応

PRを送りたいのですが、今のところ変更をテストする方法がわかりません。それらの変更で警告が修正されるかどうか。

YeomanWebpackと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>
    );
  }
}

packages.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()を呼び出しても、問題は修正されません（少なくとも私にとっては）

@Ghirigoro同じ問題= \

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

レンダリングの前後にinjectTapEventPlugin（）を使用するかどうかに関係なく。 何かアイデアはありますか？

@tavurthによる提案を追加し、エラーを取り除きました。
次の場所で試してみましたが、成功しました。

• エラーを生成するコンポーネントで
• ルートファイル
• app.jsファイル
• ReactDOM.renderが呼び出されているファイル

ReactDOM.renderファイルに配置することにしました

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

小道具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()を追加しても、修正されませんでした。
私はそれがreactHMRプラグインと関係があると思います

この問題は、UMDバージョンのreactの使用からすべてのWebpackingに切り替えることで修正しました。 これは、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はreact15以降に削除される可能性があります。調査する必要があります。

ルートの問題は@tavurthによって特定されたため、この問題をクローズします。 ありがとう！

react-tap-event-pluginを使用して、 onTouchTapプロパティを追加します。
実際、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に変更し、コードに他の変更を加えなかったため、エラーは解消されました。

誰かがinjectTapEventPlugin（）がここにあるのか教えてもらえますか？

@jakewins ：browserifyでも同じ問題が発生しました。 問題は、クライアントコード全体を使用してvendor.jsと1つのjsファイルを作成していることでした。 私は、react-event-tap-pluginをreact libが含まれているjsファイル内にバンドルする必要があることを発見しました。このアプローチにより、browserifyに関する私の問題が修正されました。

同じ問題。 @vaspoz

^ 2.0.0まで上がるreact-tap-event-pluginに関連しているようで、15.4.0を打つと反応します。 私はUMDビルドを使用しており、ReactDOM.renderの前にinjectTapEventPluginを呼び出しています。

残念ながら、UMD以外のビルドを使用することはできません。

誰かがreact + react-tap-event-plugin + material-uiの動作するUMDバージョンの組み合わせを持っていますか？

@oliviertassinariよりネイティブなonClickを持つ次のブランチを使用するのに十分安定していますか？ 半使用可能である限り、多くのものが壊れていてもかまいません。

よりネイティブなonClickを持つ次のブランチを使用するのに十分安定していますか？

@ vans163これは、1か月前のnextブランチのバージョンです：http： //material-ui-next.azurewebsites.net/。 それはあなたが安定とはどういう意味かによります。
必要に応じてAPIを変更します。 一部のコンポーネントのみが移行されており、多くの場合、部分的に移行されています。 それでも、このブランチを100％使用するようにアプリを移行しています。

新しいリリースの準備ができるまで誰かを助ける場合に備えて：私はこの問題に遭遇しましたが、一度移動すると

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

コンポーネント階層で<MuiThemeProvider>を適用するコンポーネントファイルへの行で、動作を開始しました。 （これは、redux用にmapStateToPropsを実行する場所でもありますが、これは無関係だと思います。）以前は、ラッピングコンポーネントとして機能する上位コンポーネントのファイルにそれらを適用していました。

create-app-reactから排出されたwebpackを使用しています。

@rdnewmanこれは動作します!!

どうもありがとう！

おかげさまで...この警告はテストでのみ発生しましたが、コンポーネントのテスト中にinjectTapEventPlugin()が呼び出されず、本格的なアプリでのみ呼び出されることに気付きました。

@rdnewman 、ありがとう！ あなたの方法はうまくいきます。 ReactDOM.renderメソッドファイルが含まれているindex.jsファイルに入れましたが、そのように機能しました。 👍

先週、 create-react-appを使ってこれを思いついた。 Reactは15.4.xで着信し、このエラーはinjectTapEventPlugin()適切に呼び出したにもかかわらず発生します。 これについては、 react-tap-event-plugin＃85で説明されています。 react-tap-event-pluginを2.0.0に手動で保存/インストールすると、これが解決しました。

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をインストールして15.4.2に反応する必要があります。次に、アプリをレンダリングするファイルに移動し、次の2行を含めます。

'react-tap-event-plugin'からinjectTapEventPluginをインポートします。
injectTapEventPlugin（）;

そしてそれだけです👍

@ erick2014うん：http： //www.material-ui.com/#/get-started/installation

イライラするほど漠然とした問題。 SSRシナリオでコードの再編成を行った後に戻ってきました

「react」の場合：「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();

injectTapEventPlugin（）をインポートして追加すると、問題が解決しました。

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

componentWillMount(){
    injectTapEventPlugin();
    }

Next.JSを使用しています

このソリューションは機能しません。各ページにインポートされるtap_events.jsファイルがあります。

私のファイルtap_events.js：
'react-tap-event-plugin'からinjectTapEventPluginをインポートします
if（typeof window！== 'undefined'）injectTapEventPlugin（）