Material-ui: Réagir 15.0.2 Avertissements "Accessoires inconnus onTouchTap"

Je voudrais envoyer un PR mais pour le moment je ne sais pas comment tester les changements et si ces changements corrigent l'avertissement ?

Utilisation de Yeoman Webpack et 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

Du simple :

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

Fixé en ajoutant :

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

Au composant.

J'aimerais ajouter : 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

N'apparaît que dans Dialog

Mise à jour : Peu importe, c'était avec réagir 15.0.0 , avec 15.2.1 c'est parti. Je suppose qu'ils ont oublié quelques accessoires.

J'appelle injectTapEventPlugin() à la fois sur le client et sur le serveur et je reçois toujours de nombreux avertissements avec divers éléments.

Versions :

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

Quelques avertissements :

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

@igl essaie d'appeler injectTapEventPlugin() avant ReactDOM.render

@ixrock : appeler injectTapEventPlugin() avant ReactDOM.render ne résout pas le problème (du moins pas pour moi)

@Ghirigoro le même problème =\

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

indépendamment de l'utilisation/de la non-utilisation de injectTapEventPlugin() avant/après le rendu. Des idées, les gars?

Ajout de la suggestion de @tavurth et je me suis débarrassé de l'erreur.
Je l'ai essayé dans les endroits suivants avec succès:

• Dans le composant générant l'erreur
• fichier d'itinéraires
• fichier app.js
• fichier où ReactDOM.render est appelé

J'ai décidé de le placer dans le fichier ReactDOM.render

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

Voir la même erreur sur CardTitle avec 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)

Fragment de code : <CardTitle title="Group Admin" titleStyle={styles.title}/>

Version de l'interface utilisateur matérielle : 0.15.2

Merci beaucoup.

Salut,

Je ne sais pas si le mien est lié, mais j'obtiens cette erreur lorsque j'utilise <Chip> .

Unknown prop labelColor on <div> tag.

La même chose pour moi :

Avertissement : propriété inconnue translate sur la balise. Pour plus de détails, voir https://fb.me/react-unknown-prop

Et j'ajoute :

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

injectTapEventPlugin();

Et ça ne marche PAS 👎

J'ai le même avertissement. Après quelques débogages, j'ai découvert qu'il est issu de ce code:

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

et

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

ceci est mon 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"
  }
}

l'ajout injectTapEventPlugin() n'a pas résolu le problème pour moi.
Je soupçonne que cela a quelque chose à voir avec le plugin React HMR

J'ai résolu ce problème en passant de l'utilisation de la version UMD de React à Webpack-ing. Je soupçonne que cela résout le problème car une combinaison de react-tap-event-plugin et de material-ui doit accéder aux composants internes privés de React, et cela ne peut pas être fait à partir de la version UMD. Soupir...

J'ai le même avertissement pour 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

J'ai également lu ici https://github.com/facebook/react/issues/436 que react-tap-event-plugin peut éventuellement être supprimé depuis la réaction 15. Besoin d'enquêter.

Je ferme ce problème car le problème racine a été identifié par @tavurth. Merci!

Nous comptons sur le react-tap-event-plugin pour ajouter la propriété onTouchTap .
En fait, je suis content que React ait ajouté cet avertissement. Cela va aider beaucoup de gens qui manquent ce point de la documentation.

À l'avenir, nous prévoyons de supprimer cette dépendance dans la branche next .
Nous utilisons l'événement onClick car les appareils mobiles modernes le supportent mieux (sans délai).

J'utilisais AppBar et voici le code que j'utilise pour résoudre ce problème conformément aux commentaires ci-dessus :

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

export default Header;

Pour ceux qui, comme moi, ont trouvé ce problème, appliqué les correctifs et persisté : l'approche suggérée consistant à exécuter injectTapEventPlugin() ne fonctionne que si vous utilisez WebPack ; J'ai changé mon application en webpack à partir de browserify, je n'ai apporté aucune autre modification au code et l'erreur a disparu.

Quelqu'un pourrait-il me dire pourquoi injectTapEventPlugin() est ici s'il vous plaît?

@jakewins : J'ai eu le même problème avec browserify. Le problème était que je construisais un fichier vendor.js et un fichier js avec tout mon code client. J'ai découvert que le plugin react-event-tap doit être regroupé dans le fichier js où se trouve votre bibliothèque de réaction. Cette approche a résolu mon problème avec browserify.

Même problème. @vaspoz

Semble être lié au plugin react-tap-event allant jusqu'à ^ 2.0.0 et réagir en atteignant 15.4.0. J'utilise la construction UMD et j'appelle injectTapEventPlugin avant ReactDOM.render.

L'utilisation d'une version non UMD n'est malheureusement pas une option.

Est-ce que quelqu'un a une combinaison de version UMD fonctionnelle de react + react-tap-event-plugin + material-ui?

@oliviertassinari Serait-il assez stable pour utiliser la branche suivante qui a le onClick le plus natif ? Je m'en fous si beaucoup de choses sont cassées, tant que c'est semi utilisable.

Serait-il suffisamment stable pour utiliser la branche suivante qui a le onClick le plus natif ?

@ vans163 Voici une version d'un mois de la branche next : http://material-ui-next.azurewebsites.net/. Cela dépend de ce que vous entendez par stable.
L'API va changer si nous en avons besoin. Seuls certains composants ont été migrés, et souvent partiellement. Pourtant, je migre mon application pour utiliser à 100% cette branche.

Juste au cas où cela aiderait quelqu'un jusqu'à ce que la nouvelle version soit prête : j'ai rencontré ce problème, mais une fois que j'ai déplacé le

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

lignes au fichier de composant où j'applique <MuiThemeProvider> dans la hiérarchie des composants, cela a commencé à fonctionner. (C'est aussi là que je fais mon mapStateToProps pour redux mais je suppose que ce n'est pas pertinent.) Je les avais précédemment appliqués dans le fichier pour un composant supérieur qui agissait comme mon composant d'emballage.

J'utilise un webpack éjecté de create-app-react .

@rdnewman Cela fonctionne !!

Merci beaucoup!

merci à tous ... J'ai eu cet avertissement uniquement dans les tests, puis j'ai réalisé que injectTapEventPlugin() n'était pas appelé au cours des tests de composants, uniquement dans l'application complète

@rdnewman , merci ! ta méthode fonctionne. Je l'ai mis dans mon fichier index.js où il contenait le fichier de méthode ReactDOM.render et cela fonctionnait également de cette façon. 👍

J'ai eu cela en utilisant create-react-app la semaine dernière. React est arrivé à 15.4.x et cette erreur se produit malgré l'appel approprié injectTapEventPlugin() . Ceci est discuté dans react-tap-event-plugin #85 . La sauvegarde/installation manuelle react-tap-event-plugin à 2.0.0 a résolu ce problème pour moi.

j'espère aider quelqu'un qui utilise le tapuscrit
J'utilise material-ui avec tapuscrit et j'ai eu le même problème.
Après avoir ajouté
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
code avant ReactDOM.render, il génère une erreur.

Erreur de type non interceptée : react_tap_event_plugin_1.default n'est pas une fonction

il a été résolu en changeant le style d'importation
import * as injectTapEventPlugin from 'react-tap-event-plugin';

Dieu merci, ces jours-ci, je n'ai plus qu'à installer la version 2.0.1 du plugin react-tap-event-plugin et à réagir 15.4.2, puis je suis allé dans le fichier où je rends l'application, et j'ai juste inclus ces deux lignes :

importer injectTapEventPlugin depuis 'react-tap-event-plugin' ;
injectTapEventPlugin();

Et c'est tout 👍

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

Question frustrante et vague. Je suis revenu après avoir fait une réorganisation du code dans un scénario SSR

Pour "réagir": "15.4.2",

Utilisez "react-tap-event-plugin": "^2.0.0" ou react-tap-event-plugin": "^2.0.1"

et ajouter ceci
// Nécessaire pour onTouchTap

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

L'importation et l'ajout d'injectTapEventPlugin() ont résolu mon problème.

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

componentWillMount(){
    injectTapEventPlugin();
    }

J'utilise Next.JS

Cette solution ne fonctionne pas, j'ai un fichier tap_events.js il importe chaque page.

Mon fichier tap_events.js :
importer injectTapEventPlugin depuis 'react-tap-event-plugin'
if (typeof window !== 'undefined') injectTapEventPlugin()