如何使用材料的UI和injectTapEventPlugin與蓋茨比

，當我寫AppBar標籤從材料的UI成gatsby new生成的代碼，我得到這個錯誤。如何使用材料的UI和injectTapEventPlugin與蓋茨比

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完美合作，但它很醜。
解決此問題的正確方法是什麼？

UPDATE：澄清 - gatsby new克隆gatsby-starter-default，並且有唯一的反應的組分。此外，進口和在/html.js頂部寫injectTapEventPlugin引發錯誤Warning: Unknown prop onTouchTap on <button> tag。這意味着injectTapEventPlugin（）未被正確調用。

來源

2017-05-26 pall

你正在import index.js中導入injectTapEventPlugin嗎？你可以嘗試在外面試試嗎？ –

我在pages/_template.js中導入injectTapEventPlugin。如果我沒有嘗試這樣做，HMR中會出現以下錯誤。 '錯誤：injectTapEventPlugin（）：每一次應用程序lifecycle.' – pall

你可以把這些代碼在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上的蓋茨比回購這也意味着你把它放在html.js

來源

2017-05-26 10:14:37

謝謝您的回覆只能被調用。我開始用'gatsby new'創建頁面。它克隆這個存儲庫，並且在用戶代碼中沒有'ReactDOM.render'。 https://github.com/gatsbyjs/gatsby-starter-default – pall

@pall，我已經編輯我的答案，以更好地滿足您的問題。你可以再試一次，運行一個構建並檢查問題是否存在？如果是的話，你能告訴我們什麼是問題嗎？ –

我'警告：未知的道具'onTouchTap'上

看看這個issue你只需要在你的頂級組件導入並添加injectTapEventPlugin你在哪裏渲染到HTML元素

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

injectTapEventPlugin();

來源

2017-05-26 10:22:18

謝謝您的答覆。我想知道您認爲什麼文件是'頂級組件'？ 'html.js'是gatsby-starter-default中的頂級組件，但是當我將injectTapEventPlugin放在此文件的頂部時，它不起作用。 – pall

如何使用材料的UI和injectTapEventPlugin與蓋茨比

回答

相關問題