Material-ui: React 15.0.2 „Unknown props onTouchTap“-Warnungen

Ich würde gerne eine PR senden, aber im Moment weiß ich nicht, wie ich die Änderungen testen soll und ob diese Änderungen die Warnung beheben?

Mit Yeoman Webpack und 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

Aus dem einfachen:

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

Pakete.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"
  }
}

Behoben durch Hinzufügen:

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

Zum Bauteil.

Ich möchte hinzufügen: 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

Erscheint nur in Dialog

Update: Egal, das war bei der Reaktion 15.0.0 , bei 15.2.1 ist es weg. Ich schätze, sie haben ein paar Requisiten vergessen.

Ich rufe sowohl auf dem Client als auch auf dem Server injectTapEventPlugin() an und erhalte immer noch viele Warnungen mit verschiedenen Elementen.

Versionen:

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

Einige Warnungen:

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

@igl versuche injectTapEventPlugin() vor ReactDOM.render anzurufen

@ixrock : Aufruf injectTapEventPlugin() vor ReactDOM.render behebt das Problem nicht (zumindest nicht für mich)

@Ghirigoro das gleiche Problem =\

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

unabhängig von der Verwendung/Nichtverwendung von injectTapEventPlugin() vor/nach dem Rendern. Irgendwelche Ideen, Jungs?

Ich habe den Vorschlag von @tavurth hinzugefügt und den Fehler behoben.
Ich habe es an folgenden Stellen mit Erfolg versucht:

• In der Komponente, die den Fehler erzeugt
• Routen Datei
• app.js-Datei
• Datei, in der ReactDOM.render aufgerufen wird

Ich entschied mich dafür, es in der Datei ReactDOM.render zu platzieren

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

Gleicher Fehler bei CardTitle mit Prop titleStyle...

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)

Codefragment: <CardTitle title="Group Admin" titleStyle={styles.title}/>

Material-UI-Version: 0.15.2

Vielen Dank.

Hi,

Ich bin mir nicht sicher, ob meine verwandt ist, aber ich erhalte diesen Fehler, wenn ich <Chip> verwende.

Unknown prop labelColor on <div> tag.

Das gleiche für mich :

Warnung: Unbekannte Requisite translate auf Tag. Einzelheiten finden Sie unter https://fb.me/react-unknown-prop

Und ich füge hinzu:

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

injectTapEventPlugin();

Und es funktioniert NICHT 👎

Ich habe die gleiche Warnung. Nach einigem Debuggen habe ich festgestellt, dass es von diesem Code ausgelöst wird:

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

und

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

das ist mein Paket.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"
  }
}

Das Hinzufügen injectTapEventPlugin() hat es für mich nicht behoben.
Ich vermute, es hat etwas mit dem React HMR-Plugin zu tun

Ich habe dieses Problem behoben, indem ich von der Verwendung der UMD-Version von React auf Webpacking Everything umgestiegen bin. Ich vermute, dass dies das Problem behebt, da eine Kombination aus React-Tap-Event-Plugin und Material-UI in die privaten Interna von React gelangen muss und dies von der UMD-Version aus nicht möglich ist. Seufzen...

Ich habe dieselbe Warnung für Overlay

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

Außerdem habe ich hier https://github.com/facebook/react/issues/436 gelesen, dass das „react-tap-event-plugin“ möglicherweise seit „react 15“ entfernt wird. Nachforschungen erforderlich.

Ich schließe dieses Problem, da das Hauptproblem von @tavurth identifiziert wurde. Danke!

Wir verlassen uns auf react-tap-event-plugin , um die Eigenschaft onTouchTap hinzuzufügen.
Eigentlich bin ich froh, dass React diese Warnung hinzugefügt hat. Das wird vielen Leuten helfen, die diesen Punkt in der Dokumentation übersehen.

In Zukunft planen wir, diese Abhängigkeit im next -Zweig zu entfernen.
Wir verwenden das Ereignis onClick , da es von modernen Mobilgeräten besser unterstützt wird (keine Verzögerung).

Ich habe AppBar verwendet und hier ist der Code, den ich verwende, um dies gemäß den obigen Kommentaren zu beheben:

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

export default Header;

Für diejenigen wie mich, die dieses Problem gefunden, die Fixes angewendet und das Problem weiterhin hatten: Der vorgeschlagene Ansatz, injectTapEventPlugin() auszuführen, funktioniert nur, wenn Sie WebPack verwenden; Ich habe meine App von browserify auf webpack umgestellt, keine weiteren Änderungen am Code vorgenommen und der Fehler ist verschwunden.

Könnte mir bitte jemand sagen, wofür injectTapEventPlugin() hier ist?

@jakewins : Ich hatte das gleiche Problem mit browserify. Das Problem war, dass ich eine Vendor.js- und eine JS-Datei mit meinem gesamten Client-Code baue. Ich habe herausgefunden, dass das React-Event-Tap-Plugin in der js-Datei gebündelt werden muss, in der sich Ihre React-Lib befindet. Dieser Ansatz hat mein Problem mit Browserify behoben.

Gleicher Fehler. @vaspoz

Scheint mit dem React-Tap-Event-Plugin verwandt zu sein, das auf ^ 2.0.0 aufsteigt und auf 15.4.0 reagiert. Ich verwende UMD-Build und rufe injectTapEventPlugin vor ReactDOM.render auf.

Die Verwendung eines Nicht-UMD-Builds ist leider keine Option.

Hat jemand eine funktionierende UMD-Versionskombination aus React + React-Tap-Event-Plugin + Material-UI?

@oliviertassinari Wäre es stabil genug, den nächsten Zweig zu verwenden, der das nativere onClick hat? Es ist mir egal, ob viele Dinge kaputt sind, solange es halbwegs brauchbar ist.

Wäre es stabil genug, um den nächsten Zweig zu verwenden, der das nativere onClick hat?

@vans163 Hier ist eine 1 Monat alte Version der next -Verzweigung: http://material-ui-next.azurewebsites.net/. Kommt darauf an, was man unter stabil versteht.
Die API wird sich bei Bedarf ändern. Es wurden nur einige Komponenten migriert, und oft teilweise. Trotzdem migriere ich meine App, um diesen Zweig zu 100 % zu verwenden.

Nur für den Fall, dass es jemandem hilft, bis die neue Version fertig ist: Ich bin auf dieses Problem gestoßen, habe es aber einmal verschoben

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

Zeilen in die Komponentendatei, wo ich <MuiThemeProvider> in der Komponentenhierarchie anwende, hat es funktioniert. (Hier mache ich auch meine mapStateToProps für Redux, aber ich nehme an, das ist irrelevant.) Ich hatte sie zuvor in der Datei für eine höhere Komponente angewendet, die als meine Wrapping-Komponente fungierte.

Ich verwende ein ausgeworfenes Webpack von create-app-react .

@rdnewman Das funktioniert!!

Ich danke dir sehr!

danke an alle ... Ich hatte diese Warnung nur in Tests und stellte dann fest, dass injectTapEventPlugin() nicht im Zuge des Komponententests aufgerufen wurde, sondern nur in der vollständigen App

@rdnewman , danke! deine Methode funktioniert. Ich habe es in meine index.js-Datei eingefügt, wo es die ReactDOM.render-Methodendatei enthielt, und es hat auch so funktioniert. 👍

Ich hatte das letzte Woche mit create-react-app . React kam mit 15.4.x herein und dieser Fehler tritt auf, obwohl injectTapEventPlugin() entsprechend aufgerufen wurde. Dies wird in „react-tap-event-plugin #85“ besprochen. Das manuelle Speichern/Installieren react-tap-event-plugin bei 2.0.0 löste dieses Problem für mich.

Ich hoffe, jemandem zu helfen, der Typoskript verwendet
Ich verwende Material-UI mit Typoskript und hatte das gleiche Problem.
Nach dem Hinzufügen
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
Code, bevor ReactDOM.render einen Fehler auslöst.

Nicht erfasster Typfehler: „react_tap_event_plugin_1.default“ ist keine Funktion

Es wurde durch Ändern des Importstils gelöst
import * as injectTapEventPlugin from 'react-tap-event-plugin';

Gott sei Dank muss ich heutzutage nur noch die Version 2.0.1 des Plugins „react-tap-event-plugin“ und „react 15.4.2“ installieren, dann bin ich zu der Datei gegangen, in der ich die App rendere, und füge einfach diese beiden Zeilen ein:

importiere injectTapEventPlugin aus 'react-tap-event-plugin';
injectTapEventPlugin();

Und das ist es 👍

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

Frustrierend vage Angelegenheit. Kam zurück, nachdem ich einige Code-Reorganisationen in einem SSR-Szenario durchgeführt hatte

Für "reagieren": "15.4.2",

Verwenden Sie "React-Tap-Event-Plugin": "^2.0.0" oder React-Tap-Event-Plugin": "^2.0.1"

und füge dies hinzu
// Benötigt für onTouchTap

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

Das Importieren und Hinzufügen von injectTapEventPlugin() löste mein Problem.

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

componentWillMount(){
    injectTapEventPlugin();
    }

Ich benutze Next.JS

Diese Lösung funktioniert nicht, ich habe eine Datei tap_events.js, die jede Seite importiert.

Meine Datei tap_events.js:
importiere injectTapEventPlugin aus 'react-tap-event-plugin'
if (Fenstertyp !== 'undefiniert') injectTapEventPlugin()