Material-ui: React 15.0.2“Unknown props onTouchTap”警告

我想发送 PR 但现在我不知道如何测试更改以及这些更改是否修复了警告？

使用Yeoman Webpack和react: ^15.2.1

Warning: Unknown prop `onTouchTap` on <button> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in button (created by EnhancedButton)
    in EnhancedButton (created by RaisedButton)
    in div (created by Paper)
    in Paper (created by RaisedButton)
    in RaisedButton (created by MyButton)
    in div (created by MyButton)
    in MyButton (created by AppComponent)
    in div (created by AppComponent)
    in MuiThemeProvider (created by AppComponent)
    in AppComponent

从简单的：

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

export default class MyButton extends React.Component {

  render() {
    return (
      <div>
        <RaisedButton>
          Hello, world!
        </RaisedButton>

      </div>
    );
  }
}

包.json：

{
  ...
  "devDependencies": {
    ...
    "core-js": "^2.0.0",
    "material-ui": "^0.15.2",
    "normalize.css": "^4.0.0",
    "react": "^15.2.1",
    "react-dom": "^15.0.0",
    "react-tap-event-plugin": "^1.0.0"
  }
}

通过添加修复：

// Needed for onTouchTap
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

到组件。

我想补充： transitionAppearTimeout

warning.js:44 Warning: Unknown prop `transitionAppearTimeout` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by ReactTransitionGroup)
    in ReactTransitionGroup (created by DialogInline)
    in div (created by DialogInline)
    in DialogInline
    in MuiThemeProvider

仅出现在Dialog

更新：没关系，那是反应15.0.0 ，而15.2.1已经消失了。 我猜他们忘记了一些道具。

我在客户端和服务器中都调用injectTapEventPlugin() ，但仍然会收到大量包含各种元素的警告。

版本：

"material-ui": "0.15.2",
"react": "15.2.1",
"react-dom": "15.2.1",
"react-tap-event-plugin": "1.0.0",

一些警告：

Warning: Unknown prop `onTouchTap` on <label> tag. 
Warning: Unknown props `displayBorder`, `columnNumber`, `hoverable`, `onHover`, `onHoverExit` on <td> tag.

@igl尝试在ReactDOM.render injectTapEventPlugin() #$

@ixrock ：在ReactDOM.render injectTapEventPlugin() $ 并不能解决问题（至少不适合我）

@Ghirigoro同样的问题=\

vendors.js:20314 Warning: Unknown prop `onTouchTap` on <button> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in button (created by EnhancedButton)
    in EnhancedButton (created by RaisedButton)
    in div (created by Paper)
    in Paper (created by RaisedButton)
    in RaisedButton
    in MuiThemeProvider

无论在渲染之前/之后使用/不使用 injectTapEventPlugin()。 有什么想法吗，伙计们？

添加了@tavurth的建议，我摆脱了错误。
我在以下地方尝试过成功：

• 在产生错误的组件中
• 路线文件
• app.js 文件
• 调用 ReactDOM.render 的文件

我决定将它放在 ReactDOM.render 文件中

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

在带有道具 titleStyle 的 CardTitle 上看到相同的错误...

warning.js:44 Warning: Unknown prop `titleStyle` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by CardTitle)
    in CardTitle (created by GroupAdmin)
    in div (created by Card)
    in div (created by Paper)
    in Paper (created by Card)
    in Card (created by GroupAdmin)
    in span (created by GroupAdmin)
    in GroupAdmin (created by Operations)

代码片段： <CardTitle title="Group Admin" titleStyle={styles.title}/>

材质 UI 版本：0.15.2

非常感谢。

你好呀，

不确定我的是否相关，但在使用<Chip>时出现此错误。

Unknown prop labelColor on <div> tag.

我也一样 ：

警告：标签上的未知道具translate 。 从元素中移除这个道具。

我补充说：

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

injectTapEventPlugin();

而且它不起作用👎

我有同样的警告。 经过一些调试，我发现它是从这段代码中引发的：

const MenuLeftItem =
  ({text,url}) =>
    <ListItem
      className="menuleft-module-item"
      primaryText={text}
    />

和

<AppBar
   title="Admin Panel"
   iconElementLeft={
      <IconButton>
         <NavigationClose />
      </IconButton>
    }
     onClick={onCollapse}
  />

这是我的 package.json

"dependencies": {
    "brace": "^0.8.0",
    "d3": "^4.2.2",
    "deepmerge": "^0.2.10",
    "dom-value": "^1.0.1",
    "form-controls": "^1.0.0",
    "form-parse": "^0.1.0",
    "form-urlencoded": "^1.2.1",
    "formsy-material-ui": "^0.5.0",
    "formsy-react": "^0.18.1",
    "is-submittable": "^1.0.0",
    "isomorphic-fetch": "^2.2.1",
    "js-beautify": "^1.5.10",
    "lodash": "^4.14.1",
    "material-ui": "^0.15.4",
    "muicss": "^0.7.3",
    "query-string": "^4.2.2",
    "radium": "^0.18.1",
    "rd3": "^0.7.1",
    "react": "^15.3.1",
    "react-ace": "^3.1.0",
    "react-diff": "0.0.6",
    "react-dimensions": "^2.0.0-alpha1",
    "react-dom": "^15.3.1",
    "react-edit-inline": "^1.0.6",
    "react-graph-vis": "0.0.3",
    "react-hotkeys": "^0.9.0",
    "react-modal": "^1.4.0",
    "react-notification": "^6.1.0",
    "react-redux": "^4.0.6",
    "react-router": "^2.6.1",
    "react-syntax-highlighter": "^2.0.3",
    "react-tap-event-plugin": "^1.0.0",
    "reactable": "^0.14.0",
    "recompose": "^0.20.0",
    "reduce": "^1.0.1",
    "redux": "^3.0.6",
    "redux-actions": "^0.11.0",
    "redux-localstorage": "^0.4.0",
    "redux-saga": "^0.11.0",
    "redux-thunk": "^2.1.0",
    "reduxerit": "^0.4.1",
    "reselect": "^2.0.3",
    "sha1": "^1.1.1",
    "sleep-promise": "^2.0.0",
    "squares": "^0.2.1",
    "uuid": "^2.0.2",
    "vis": "^4.16.1"
  }
}

添加injectTapEventPlugin()并没有为我解决这个问题。
我怀疑它与 react HMR 插件有关

我通过从使用 UMD 版本的 react 切换到 webpack-ing 来解决这个问题。 我怀疑这修复了它，因为 react-tap-event-plugin 和 material-ui 的一些组合需要进入 React 的私有内部，而它不能从 UMD 版本中做到这一点。 叹...

我对覆盖有同样的警告

Warning: Unknown prop `onTouchTap` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by Overlay)
    in Overlay (created by DialogInline)
    in div (created by DialogInline)
    in DialogInline

我也在这里读到了https://github.com/facebook/react/issues/436，react-tap-event-plugin自反应 15 以来可能会被删除。需要调查。

我正在关闭这个问题，因为@tavurth 已经确定了根本问题。 谢谢！

我们依靠react-tap-event-plugin来添加onTouchTap属性。
实际上，我很高兴 React 添加了这个警告。 这将帮助很多从文档中错过这一点的人。

展望未来，我们计划在next分支中删除此依赖项。
我们使用onClick事件，因为现代移动设备更好地支持它（无延迟）。

我正在使用 AppBar，这是我用来解决上述问题的代码：

const Header = React.createClass({
handleClick(e){
console.log("reached here::");
},
render(){
injectTapEventPlugin();
return <AppBar title="Some Heading" onTitleTouchTap={this.handleClick()}/>
}
});

export default Header;

对于像我这样发现此问题、应用修复程序并且问题仍然存在的人：运行injectTapEventPlugin()的建议方法仅在您使用 WebPack 时有效； 我将我的应用程序从 browserify 更改为 webpack，没有对代码进行其他更改，错误就消失了。

谁能告诉我 injectTapEventPlugin() 是干什么用的？

@jakewins ：我对 browserify 也有同样的问题。 问题是我正在使用我的整个客户端代码构建一个 vendor.js 和一个 js 文件。 我发现，react-event-tap-plugin 必须捆绑在你的 react lib 所在的 js 文件中。这种方法解决了我的 browserify 问题。

同样的问题。 @vaspoz

似乎与 react-tap-event-plugin 上升到 ^2.0.0 并反应达到 15.4.0 有关。 我正在使用 UMD 构建并在 ReactDOM.render 之前调用 injectTapEventPlugin。

不幸的是，使用非 UMD 构建不是一种选择。

有没有人有反应 + react-tap-event-plugin + material-ui 的 UMD 版本组合？

@oliviertassinari使用具有更多原生 onClick 的下一个分支是否足够稳定？ 我不在乎是否有很多东西坏了，只要它是半可用的。

使用具有更多原生 onClick 的下一个分支是否足够稳定？

@vans163这是next分支的 1 个月大版本：http: //material-ui-next.azurewebsites.net/。 这取决于您所说的稳定是什么意思。
如果我们需要，API 将会改变。 只有一些组件被迁移，而且通常是部分迁移。 不过，我正在迁移我的应用程序以 100% 使用这个分支。

以防万一在新版本准备好之前它可以帮助某人：我遇到了这个问题，但是一旦我移动了

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

行到我在组件层次结构中应用<MuiThemeProvider>的组件文件中，它开始工作。 （这也是我为 redux 执行 mapStateToProps 的地方，但我认为这无关紧要。）我之前已将它们应用到文件中，用于充当我的包装组件的更高组件。

我正在使用create-app-react中的弹出 webpack。

@rdnewman这行得通！

太感谢了！

谢谢大家......我只在测试中收到了这个警告，然后意识到在测试组件的过程中没有调用injectTapEventPlugin() ，只有在完整的应用程序中

@rdnewman ，谢谢！ 你的方法有效。 我把它放在我的 index.js 文件中，其中包含 ReactDOM.render 方法文件，它也以这种方式工作。 👍

上周我用create-react-app提出了这个问题。 React 在 15.4.x 中出现，尽管适当地调用injectTapEventPlugin() ，但仍会发生此错误。 这在react-tap-event-plugin #85中讨论。 在2.0.0 $ 处手动保存/安装react-tap-event-plugin为我解决了这个问题。

希望对使用打字稿的人有所帮助
我正在使用带有 typescript 的 material-ui 并且遇到了同样的问题。
添加后
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
ReactDOM.render 之前的代码会引发错误。

未捕获的类型错误：react_tap_event_plugin_1.default 不是函数

通过更改导入样式解决了
import * as injectTapEventPlugin from 'react-tap-event-plugin';

谢天谢地，这些天我只需要安装 react-tap-event-plugin 2.0.1 和 react 15.4.2，然后我去我渲染应用程序的文件，只包含这两行：

从'react-tap-event-plugin'导入injectTapEventPlugin；
injectTapEventPlugin();

就是这样👍

@erick2014 是的：http: //www.material-ui.com/#/get-started/installation

令人沮丧的模糊问题。 我在 SSR 场景中进行了一些代码重组后回来了

对于“反应”：“15.4.2”，

使用 "react-tap-event-plugin": "^2.0.0" 或 react-tap-event-plugin": "^2.0.1"

并添加这个
// onTouchTap 需要

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

导入和添加 injectTapEventPlugin() 解决了我的问题。

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

componentWillMount(){
    injectTapEventPlugin();
    }

我正在使用 Next.JS

这个解决方案不起作用，我有一个文件 tap_events.js 它是导入每个页面。

我的文件 tap_events.js：
从'react-tap-event-plugin'导入injectTapEventPlugin
if (typeof window !== 'undefined') injectTapEventPlugin()