为什么在我的TypeScript项目中没有react-tap-event-plugin？

Question

我正在尝试使用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已调用,所以为什么我会收到错误？

Answer 1

摆脱<script>你的两个 s index.html：

<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. 接下来摆脱你的externalsfrom webpack.config.js：

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

因为您没有使用<script>s 来包含react，所以react-dom没有理由拥有它们。

该调用injectTapEventPlugin将自定义事件和道具注入到元素中，并且必须调用react-dom才能正确应用和注入道具。源代码中的以下几行：

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

将插件直接注入到您安装的副本react-dompackage.json中的路径中，node_modules/react-dom/lib/ReactDOM.js而不是node_modules/react-dom/dist/react-dom.js。

react-dom由于您两次包含依赖项，因此对 中副本的注入package.json将被覆盖。因此，当您将其包含在<script>s 中时，您会看到错误，因为来自的副本<script>没有注入插件。去掉<script>sindex.html将消除这种二次包含并阻止注入被覆盖。