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上的entire source code。

我确定问题是什么，因为调试器显示调用了injectTapEventPlugin，为什么我会收到错误？

Answer 1

摆脱<script>中的两个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中。接下来从externals

中删除webpack.config.js

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

由于您未使用<script>来包含react和react-dom，因此没有理由拥有它们。

调用injectTapEventPlugin将自定义事件和道具注入元素，必须使用react-dom调用才能正确应用和注入道具。以下行in the source：

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

将插件直接插入您在react-dom 中安装的副本package.json，路径node_modules/react-dom/lib/ReactDOM.js，而不是node_modules/react-dom/dist/react-dom.js < / em>的

由于您将依赖项包括两次，因此react-dom中对副本package.json的注入被覆盖。因此，当您将其与<script> s包含在一起时，您会看到错误，因为来自<script>的副本没有注入插件。从<script>中删除index.html s将消除此次要包含并停止注入被覆盖。

Answer 2

这看起来像是在index.html和webpack.config.js中引用React引起的。从webpack.config.js中删除以下两行：

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

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

2 个答案: