Wie Material-Ui und InjectTapEventPlugin mit Gatsby

Question

verwenden Ich habe diesen Fehler, wenn ich AppBar-Tag von Material-Ui in einen Code von gatsby new generiert geschrieben.

Warning: Unknown prop `onTouchTap` on <button> tag. Remove this prop from the element. 

dies zu vermeiden, schrieb ich diesen Code an der Spitze der Root-Template (_template.jsx) Datei.

import injectTapEventPlugin from 'react-tap-event-plugin'; 
try { // to prevent error because of loading twice 
    injectTapEventPlugin(); 
} 
catch(e) { 
    console.warn(e); 
} 

Dies funktioniert perfekt mit HMR, aber es ist hässlich.
Was ist der richtige Weg, um dieses Problem zu lösen?

UPDATE: Um zu klären - gatsby new Klone gatsby-starter-default, und es gibt nur React-Komponenten. Zum Importieren und Schreiben von injectTapEventPlugin am Anfang von /html.js wird außerdem ein Fehler ausgegeben Warning: Unknown prop onTouchTap on <button> tag. Dies bedeutet, dass injectTapEventPlugin() nicht ordnungsgemäß aufgerufen wird.

Answer 1

Sie können diesen Code in html.js setzen und es wird überall

import React from 'react' 
import PropTypes from 'prop-types' 
import Helmet from 'react-helmet' 

import { prefixLink } from 'gatsby-helpers' 
import { TypographyStyle } from 'react-typography' 
import typography from './utils/typography' 
import injectTapEventPlugin from 'react-tap-event-plugin'; 

injectTapEventPlugin(); 

const BUILD_TIME = new Date().getTime() 

export default class HTML extends React.Component { 
... 

Sie können einen Blick auf diese issue in gatsby Repo auf GitHub nehmen arbeiten, was dafür spricht, dass Sie ihn in html.js

Answer 2

Sie müssen nur injectTapEventPlugin in Ihrer Top-Level-Komponente importieren und hinzufügen, von wo Sie in Ihr html-Element rendern.

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

injectTapEventPlugin();