Aunque la última versión solucionó un par de problemas. Sigo viendo estas dos advertencias.
Warning: Unknown prop `onTouchTap` on <span> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
in span (created by EnhancedButton)
in EnhancedButton (created by ListItem)
in div (created by ListItem)
in ListItem (created by ChatMenu)
in div (created by List)
in List (created by _class)
in _class (created by ChatMenu)
in div (created by Paper)
in Paper (created by Drawer)
in div (created by Drawer)
in Drawer (created by ChatMenu)
in ChatMenu (created by ChatApp)
in div (created by ChatApp)
in ChatApp (created by Chat)
in MuiThemeProvider (created by Chat)
in Chat (created by WithWidth)
in EventListener (created by WithWidth)
in WithWidth (created by RouterContext)
in RouterContext (created by Router)
in Router (created by Root)
in e (created by Root)
in Provider (created by Root)
Warning: Unknown prop `styles` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
in div (created by Paper)
in Paper (created by AppBar)
in AppBar (created by ChatRoom)
in div (created by ChatRoom)
in ChatRoom (created by ChatApp)
in div (created by ChatApp)
in ChatApp (created by Chat)
in MuiThemeProvider (created by Chat)
in Chat (created by WithWidth)
in EventListener (created by WithWidth)
in WithWidth (created by RouterContext)
in RouterContext (created by Router)
in Router (created by Root)
in e (created by Root)
in Provider (created by Root)
Me gustaría enviar un PR, pero en este momento no sé cómo probar los cambios y si esos cambios corrigen la advertencia.
Usando Yeoman Webpack y 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
De lo sencillo:
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>
);
}
}
Paquetes.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"
}
}
Se corrigió agregando:
// Needed for onTouchTap
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
Al componente.
Me gustaría agregar: 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
Solo aparece en Dialog
Actualización: no importa, eso fue con reaccionar 15.0.0
, con 15.2.1
se ha ido. Supongo que se olvidaron de algunos accesorios.
Llamo a injectTapEventPlugin()
tanto en el cliente como en el servidor y sigo recibiendo muchas advertencias con varios elementos.
Versiones:
"material-ui": "0.15.2",
"react": "15.2.1",
"react-dom": "15.2.1",
"react-tap-event-plugin": "1.0.0",
Algunas advertencias:
Warning: Unknown prop `onTouchTap` on <label> tag.
Warning: Unknown props `displayBorder`, `columnNumber`, `hoverable`, `onHover`, `onHoverExit` on <td> tag.
@igl intenta llamar a injectTapEventPlugin()
antes ReactDOM.render
@ixrock : llamar a injectTapEventPlugin()
antes ReactDOM.render
no soluciona el problema (al menos no para mí)
@Ghirigoro el mismo 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
independientemente de usar/no usar injectTapEventPlugin() antes/después de renderizar. ¿Alguna idea, chicos?
Agregué la sugerencia de @tavurth y me deshice del error.
Lo probé en los siguientes lugares con éxito:
Decidí colocarlo en el archivo ReactDOM.render
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
Al ver el mismo error en CardTitle con 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}/>
Versión de la interfaz de usuario del material: 0.15.2
Muchas gracias.
Hola,
No estoy seguro de si el mío está relacionado, pero recibo este error cuando uso <Chip>
.
Unknown prop labelColor on <div> tag.
Lo mismo para mi :
Advertencia: Accesorio desconocido
translate
en la etiqueta. Para obtener más información, consulte https://fb.me/react-unknown-prop
Y agrego:
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
Y NO funciona 👎
Tengo la misma advertencia. Después de algunas depuraciones, descubrí que se genera a partir de este código:
const MenuLeftItem =
({text,url}) =>
<ListItem
className="menuleft-module-item"
primaryText={text}
/>
y
<AppBar
title="Admin Panel"
iconElementLeft={
<IconButton>
<NavigationClose />
</IconButton>
}
onClick={onCollapse}
/>
este es mi paquete.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"
}
}
agregar injectTapEventPlugin()
no lo arregló para mí.
sospecho que tiene algo que ver con el complemento reaccionar HMR
Solucioné este problema cambiando de usar la versión UMD de reaccionar a empaquetar todo en la web. Sospecho que esto lo soluciona porque una combinación de react-tap-event-plugin y material-ui necesita llegar a las partes internas privadas de React, y no puede hacerlo desde la versión UMD. Suspiro...
Tengo la misma advertencia 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
También he leído aquí https://github.com/facebook/react/issues/436 que el plug-in de eventos de tap de reacción posiblemente se elimine desde la versión de reacción 15. Necesito investigar.
Estoy cerrando este problema ya que @tavurth identificó el problema raíz. ¡Gracias!
Confiamos en react-tap-event-plugin
para agregar la propiedad onTouchTap
.
En realidad, me alegro de que React haya agregado esta advertencia. Eso va a ayudar a mucha gente que se pierde este punto de la documentación.
En el futuro, planeamos eliminar esta dependencia en la rama next
.
Usamos el evento onClick
ya que los dispositivos móviles modernos lo admiten mejor (sin demora).
Estaba usando AppBar y aquí está el código que estoy usando para arreglar esto según los comentarios anteriores:
const Header = React.createClass({
handleClick(e){
console.log("reached here::");
},
render(){
injectTapEventPlugin();
return <AppBar title="Some Heading" onTitleTouchTap={this.handleClick()}/>
}
});
export default Header;
Para aquellos como yo que encontraron este problema, aplicaron las correcciones y el problema persistía: el enfoque sugerido de ejecutar injectTapEventPlugin()
solo funciona si está utilizando WebPack; Cambié mi aplicación a webpack desde browserify, no hice otros cambios en el código y el error desapareció.
¿Alguien podría decirme para qué está aquí injectTapEventPlugin(), por favor?
@jakewins : Tuve el mismo problema con browserify. El problema fue que estoy creando un archivo vendor.js y un archivo js con todo mi código de cliente. Descubrí que el plugin react-event-tap debe incluirse en el archivo js donde se encuentra su lib de reacción. Este enfoque solucionó mi problema con browserify.
Mismo problema. @vaspoz
Parece estar relacionado con el complemento de evento de toque de reacción que sube a ^ 2.0.0 y reacciona golpeando 15.4.0. Estoy usando UMD build y llamando a injectTapEventPlugin antes de ReactDOM.render.
Desafortunadamente, usar una compilación que no sea UMD no es una opción.
¿Alguien tiene una combinación de versión UMD funcional de react + react-tap-event-plugin + material-ui?
@oliviertassinari ¿Sería lo suficientemente estable como para usar la siguiente rama que tiene el onClick más nativo? No me importa si muchas cosas están rotas, siempre y cuando sea semi utilizable.
¿Sería lo suficientemente estable como para usar la siguiente rama que tiene el onClick más nativo?
@ vans163 Aquí hay una versión de 1 mes de antigüedad de la rama next
: http://material-ui-next.azurewebsites.net/. Depende de lo que entiendas por estable.
La API va a cambiar si es necesario. Solo se han migrado algunos componentes y, a menudo, parcialmente. Aún así, estoy migrando mi aplicación para usar al 100% esta rama.
En caso de que ayude a alguien hasta que la nueva versión esté lista: me encontré con este problema, pero una vez que moví el
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
líneas al archivo de componentes donde aplico <MuiThemeProvider>
en la jerarquía de componentes, comenzó a funcionar. (También es donde hago mi mapStateToProps para redux, pero supongo que eso es irrelevante). Los había aplicado previamente en el archivo para un componente superior que actuaba como mi componente de envoltura.
Estoy usando un paquete web expulsado de create-app-react
.
@rdnewman ¡¡Esto funciona!!
¡Muchas gracias!
gracias a todos... Recibí esta advertencia solo en las pruebas, y luego me di cuenta de que injectTapEventPlugin()
no se llamó en el curso de las pruebas de los componentes, solo en la aplicación completa
@rdnewman , ¡gracias! su método funciona. Lo puse en mi archivo index.js donde contenía el archivo del método ReactDOM.render y también funcionó de esa manera. 👍
Se me ocurrió esto usando create-react-app
la semana pasada. React llegó en 15.4.x y este error ocurre a pesar de llamar a injectTapEventPlugin()
apropiadamente. Esto se analiza en react-tap-event-plugin #85 . Guardar/instalar manualmente react-tap-event-plugin
en 2.0.0
resolvió esto por mí.
espero ayudar a alguien que use mecanografiado
Estoy usando material-ui con mecanografiado y tuve el mismo problema.
Después de agregar
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
el código antes de ReactDOM.render arroja un error.
TypeError no detectado: react_tap_event_plugin_1.default no es una función
se resolvió cambiando el estilo de importación
import * as injectTapEventPlugin from 'react-tap-event-plugin';
Gracias a Dios, en estos días solo tengo que instalar el complemento react-tap-event-plugin versión 2.0.1 y reaccionar 15.4.2, luego fui al archivo donde renderizo la aplicación, y solo incluí estas dos líneas:
importar injectTapEventPlugin desde 'react-tap-event-plugin';
inyectarTapEventPlugin();
Y eso es todo 👍
@erick2014 Sí: http://www.material-ui.com/#/get-started/installation
Problema frustrantemente vago. Regresé después de reorganizar un poco el código en un escenario de SSR
Para "reaccionar": "15.4.2",
Use "react-tap-event-plugin": "^2.0.0" o react-tap-event-plugin": "^2.0.1"
y agrega esto
// Necesario para onTouchTap
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
Importar y agregar injectTapEventPlugin() resolvió mi problema.
import injectTapEventPlugin from 'react-tap-event-plugin;
componentWillMount(){
injectTapEventPlugin();
}
Estoy usando Next.JS
Esta solución no funciona, tengo un archivo tap_events.js que importa cada página.
Mi archivo tap_events.js:
importar injectTapEventPlugin desde 'react-tap-event-plugin'
if (tipo de ventana! == 'indefinido') injectTapEventPlugin()
Comentario más útil
Se corrigió agregando:
Al componente.