Material-ui: Reagir 15.0.2 avisos "Props desconhecidos no TouchTap"

Gostaria de enviar um PR, mas no momento não sei como testar as alterações e se essas alterações corrigem o aviso?

Usando o Yeoman Webpack e 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

Do simples:

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

Corrigido adicionando:

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

Ao componente.

Eu gostaria de adicionar: 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

Só aparece em Dialog

Atualização: Deixa pra lá, isso foi com react 15.0.0 , com 15.2.1 acabou. Acho que esqueceram alguns adereços.

Eu chamo injectTapEventPlugin() no cliente e no servidor e ainda recebo muitos avisos com vários elementos.

Versões:

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

Alguns Avisos:

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

@igl tente ligar para injectTapEventPlugin() antes ReactDOM.render

@ixrock : chamar injectTapEventPlugin() antes ReactDOM.render não resolve o problema (pelo menos não para mim)

@Ghirigoro o mesmo problema =\

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

independentemente de usar/não usar injectTapEventPlugin() antes/depois da renderização. Alguma ideia, pessoal?

Adicionei a sugestão do @tavurth e me livrei do erro.
Eu tentei nos seguintes lugares com sucesso:

• No componente que gera o erro
• arquivo de rotas
• arquivo app.js
• arquivo onde ReactDOM.render está sendo chamado

Eu decidi colocá-lo no arquivo ReactDOM.render

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

Vendo o mesmo erro no CardTitle com 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)

Fragmento de código: <CardTitle title="Group Admin" titleStyle={styles.title}/>

Versão da interface do usuário do material: 0.15.2

Muito obrigado.

Olá,

Não tenho certeza se o meu está relacionado, mas recebo esse erro ao usar <Chip> .

Unknown prop labelColor on <div> tag.

O mesmo para mim :

Aviso: prop desconhecido translate na tag. Para obter detalhes, consulte https://fb.me/react-unknown-prop

E eu adiciono:

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

injectTapEventPlugin();

E NÃO FUNCIONA 👎

Tenho o mesmo aviso. Após alguma depuração, descobri que ele é gerado a partir deste código:

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

e

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

este é o meu pacote.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"
  }
}

adicionar injectTapEventPlugin() não resolveu para mim.
eu suspeito que tem algo a ver com o plugin react HMR

Eu consertei esse problema mudando do uso da versão UMD do react para o webpacking de tudo. Eu suspeito que isso corrige isso porque algum combo de react-tap-event-plugin e material-ui precisa alcançar os internos privados do React, e não pode fazer isso na versão UMD. Suspirar...

Eu tenho o mesmo aviso para 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

Também li aqui https://github.com/facebook/react/issues/436 que react-tap-event-plugin possivelmente pode ser removido desde react 15. Precisa investigar.

Estou encerrando este problema, pois o problema raiz foi identificado por @tavurth. Obrigado!

Contamos com react-tap-event-plugin para adicionar a propriedade onTouchTap .
Na verdade, estou feliz que o React tenha adicionado este aviso. Isso vai ajudar muitas pessoas que perdem esse ponto da documentação.

Daqui para frente, planejamos remover essa dependência no branch next .
Usamos o evento onClick , pois os dispositivos móveis modernos o suportam melhor (sem atraso).

Eu estava usando o AppBar e aqui está o código que estou usando para corrigir isso conforme os comentários acima:

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

export default Header;

Para aqueles como eu que encontraram esse problema, aplicaram as correções e o problema persistiu: A abordagem sugerida de executar injectTapEventPlugin() só funciona se você estiver usando o WebPack; Mudei meu aplicativo para webpack de browserify, não fiz outras alterações no código e o erro desapareceu.

Alguém poderia me dizer para que injectTapEventPlugin() está aqui, por favor?

@jakewins : Eu tive o mesmo problema com o browserify. O problema era que estou construindo um arquivo vendor.js e um js com todo o meu código de cliente. Eu descobri que o plug-in react-event-tap-plugin deve ser empacotado dentro do arquivo js onde está sua lib react. Essa abordagem corrigiu meu problema com o browserify.

O mesmo problema. @vaspoz

Parece estar relacionado ao plug-in react-tap-event-plugin subindo para ^2.0.0 e reagindo atingindo 15.4.0. Estou usando a compilação UMD e chamando injectTapEventPlugin antes de ReactDOM.render.

Usar uma compilação não UMD infelizmente não é uma opção.

Alguém tem uma combinação de versão UMD funcional de react + react-tap-event-plugin + material-ui?

@oliviertassinari Seria estável o suficiente para usar o próximo branch que possui o onClick mais nativo? Eu não me importo se muitas coisas estiverem quebradas, desde que seja semi-utilizável.

Seria estável o suficiente para usar a próxima ramificação que possui o onClick mais nativo?

@vans163 Aqui está uma versão de 1 mês do branch next : http://material-ui-next.azurewebsites.net/. Depende do que você entende por estável.
A API vai mudar se precisarmos. Apenas alguns componentes foram migrados e, muitas vezes, parcialmente. Ainda assim, estou migrando meu aplicativo para usar 100% este branch.

Apenas no caso de ajudar alguém até que a nova versão esteja pronta: me deparei com esse problema, mas uma vez que mudei o

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

linhas para o arquivo do componente onde aplico <MuiThemeProvider> na hierarquia do componente, começou a funcionar. (É também onde eu faço meu mapStateToProps para redux, mas suponho que isso seja irrelevante.) Eu os apliquei anteriormente no arquivo para um componente superior que atuou como meu componente de encapsulamento.

Estou usando um webpack ejetado de create-app-react .

@rdnewman Isso funciona!!

Muito obrigado!

obrigado a todos... eu tive esse aviso apenas em testes, e então percebi que injectTapEventPlugin() não foi chamado durante os testes de componentes, apenas no aplicativo completo

@rdnewman , obrigado! seu método funciona. Eu coloquei no meu arquivo index.js onde ele continha o arquivo do método ReactDOM.render e também funcionou dessa forma. 👍

Eu tive isso usando create-react-app semana passada. React veio em 15.4.xe este erro acontece apesar de chamar injectTapEventPlugin() apropriadamente. Isso é discutido em react-tap-event-plugin #85 . Salvar/instalar manualmente react-tap-event-plugin em 2.0.0 resolveu isso para mim.

espero ajudar alguém que usa texto datilografado
Estou usando material-ui com typescript e tive o mesmo problema.
Depois de adicionar
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
código antes de ReactDOM.render lança erro.

TypeError não capturado: react_tap_event_plugin_1.default não é uma função

foi resolvido alterando o estilo de importação
import * as injectTapEventPlugin from 'react-tap-event-plugin';

Graças a Deus, hoje em dia eu só tenho que instalar o react-tap-event-plugin versão 2.0.1 e reagir 15.4.2, então fui para o arquivo onde eu renderizo app, e apenas incluí essas duas linhas:

importe injectTapEventPlugin de 'react-tap-event-plugin';
injectTapEventPlugin();

E é isso 👍

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

Questão frustrantemente vaga. Voltei depois de fazer uma reorganização de código em um cenário SSR

Para "reagir": "15.4.2",

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

e adicione isso
// Necessário para onTouchTap

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

Importar e adicionar injectTapEventPlugin() resolveu meu problema.

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

componentWillMount(){
    injectTapEventPlugin();
    }

Estou usando Next.JS

Esta solução não funciona, tenho um arquivo tap_events.js que importa cada página.

Meu arquivo tap_events.js:
importe injectTapEventPlugin de 'react-tap-event-plugin'
if (typeof window !== 'undefined') injectTapEventPlugin()