reactjs - 如何在 gatsby 中使用 material-ui 和 injectTapEventPlugin

Question

当我将 Material-ui 中的 AppBar 标签写入由gatsby new.

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

为了避免这种情况，我在根模板 (_template.jsx) 文件的顶部编写了这些代码。

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

这与 HMR 完美配合，但它很难看。
解决此问题的正确方法是什么？

更新：澄清 -gatsby new克隆gatsby-starter-default，并且只有 React 组件。此外，在顶部导入和编写 injectTapEventPlugin/html.js会引发错误Warning: Unknown prop onTouchTap on <button> tag。这意味着没有正确调用 injectTapEventPlugin()。

Answer 1

你可以把那个代码放进去，html.js它会在任何地方工作

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 {
...

您可以在 GitHub 上的 gatsby repo 中查看这个问题，这也建议您将其放入html.js

Answer 2

您只需要导入并添加injectTapEventPlugin您要渲染到 html 元素的顶级组件

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

injectTapEventPlugin();