javascript - 為什麼 react-tap-event-plugin 在我的 TypeScript 專案中不起作用？

我正在嘗試使用 material-ui 和 react-tap-event-plugin，但在應用程式載入時出現以下錯誤：

react-dom.js:18238 Warning: Unknown prop `onTouchTap` on <button> tag. Remove this prop from the element. For details, see https://....
  in button (created by EnhancedButton)
  in EnhancedButton (created by IconButton)
  in IconButton (created by AppBar)
  in div (created by Paper)
  in Paper (created by AppBar)
  in AppBar (created by AppLayout)
  in div (created by AppLayout)
  in div (created by AppLayout)
  in AppLayout
  in MuiThemeProvider

這是我的 index.tsx 檔案：

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

injectTapEventPlugin();//I am able to get into this in the js debugger

ReactDOM.render(....)

這是我的 index.html 文件：

<div id="app"></div>
<script src="/node_modules/react/dist/react.js"></script>
<script src="/node_modules/react-dom/dist/react-dom.js"></script>
<script src="/dist/bundle.js"></script>

這是我的 tsconfig.json：

{
  "compilerOptions": {
    "outDir": "./dist/",

    "allowJs": true,
    "sourceMap": true,
    "noImplicitAny": false,
    "noEmit": true,
    "baseUrl": ".",
    "suppressImplicitAnyIndexErrors": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react"
  },
  "include": [
    "./src/**/*",
  ],
  "exclude": [
    "node_modules" // don't run on any code in the node_modules directory
  ]
}

我的 package.json：

{
  "name": "affiliate_portal_client",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/react": "^15.0.25",
    "@types/react-dom": "^15.5.0",
    "react": "^15.5.4",
    "react-addons-css-transition-group": "^15.5.2",
    "react-dom": "^15.5.4",
    "react-tap-event-plugin": "^2.0.1",
    "material-ui": "^0.18.1"
  },
  "devDependencies": {
    "@types/react-tap-event-plugin": "0.0.30",
    "awesome-typescript-loader": "^3.1.3",
    "source-map-loader": "^0.2.1",
    "typescript": "^2.3.3"
  }
}

這裡是 BitBucket 上的完整原始碼。

我不確定問題是什麼，因為除錯器顯示 injectTapEventPlugin 已被調用，那麼我為什麼會得到錯誤呢？

答案＃1

把你在 index.html 中的兩個 <script> 移除：

<script src="/node_modules/react/dist/react.js"></script>
<script src="/node_modules/react-dom/dist/react-dom.js"></script>

包含它們沒有任何意義，因為 react 和 react-dom 已經作為依賴項包含在你的 package.json 中。接下來，從 webpack.config.js 中刪除你的 externals：

externals: {
    "react": "React",
    "react-dom": "ReactDOM"
}

既然你沒有使用 <script> 來引入 react 和 react-dom，就沒有理由保留它們。

呼叫 injectTapEventPlugin 將自訂事件和屬性注入到元素中，必須與 react-dom 一起調用，才能正確地應用和注入這些屬性。源代碼中的以下幾行：

require('react-dom/lib/EventPluginHub').injection.injectEventPluginsByName({
  'TapEventPlugin':       require('./TapEventPlugin.js')(shouldRejectClick)
});

將插件直接注入到你在 package.json 中安裝的 複本 react-dom，路徑為 node_modules/react-dom/lib/ReactDOM.js，而不是 node_modules/react-dom/dist/react-dom.js。

由於你重複包含了依賴項，package.json 中對複本 react-dom 的注入被覆蓋。因此，當你使用 <script> 引入它時，就會看到錯誤，因為來自 <script> 的複本沒有注入插件。從 index.html 中移除這些 <script> 就可以消除這種二次引入，並停止注入被覆蓋。

答案＃2

這看起來是由於在 index.html 和 webpack.config.js 中都引用了 React 導致的。從 webpack.config.js 中刪除以下兩行：

externals: {
    "react": "React",      // remove this
    "react-dom": "ReactDOM"    // remove this
},