未知道具 - 反应和 material-ui

Question

目前我正在使用 React 和 material-ui 并且我的组件中有以下代码。

<Dialog
    title="Dialog With Actions"
    actions={actions}
    modal={false}
    open={this.state.open}
    onRequestClose={this.handleClose}>
      Are you sure that you want to proceed?
  </Dialog>

我已经导入了

import React from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';

但我总是收到以下错误消息

Warning: Unknown prop `onKeyboardFocus` on <button> tag. Remove this prop from the element.
Warning: Unknown prop `keyboardFocused` on <button> tag. Remove this prop from the element.

Answer 1

首先，这是警告而非错误消息，即您的代码仍在运行。如果按照警告信息中的link，可以发现：

The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.

还有更多细节和可能的原因，但如果我不得不推测您正在将所有道具传递给按钮元素。

注释下方的评论也很有趣：

For anyone who is curious/wondering why this new warning exists...

Historically, React has maintained a whitelist of all valid DOM attributes, and we would strip unrecognized attributes. This approach has a couple major downsides:

Performance: It means we must do a check for every prop on every DOM element, to sanity check that the prop is valid, and strip the prop if it is not legal. This is silly, because the majority of elements are completely safe (no illegal attributes) and thus the checks are just wasted CPU cycles.

The old technique forced us to maintain a huge whitelist of all possible DOM attributes. This is a pain to maintain, but more
importantly, if we accidentally miss one or browser vendors add a new one, it means that prop can't be used until we update our whitelist

The old technique is less flexible because it is impossible to render a non-standard attribute. While rendering non-standard attributes is not recommended (you should use a data- attribute instead), sometimes there are situations/frameworks that require it. It sucks that React previously couldn't support it.

随着我们逐步删除这个白名单，我们需要给人们一个清理现有应用程序的机会。这样，升级不会导致我们将大量意想不到的道具倾倒到 DOM.

编辑：这很可能来自您正在使用的库的 jsx (material-ui) 检查您是否使用最新版本，或者如果您是，他们应该尽快解决它

Answer 2

这是 material-ui 的一个问题，他们已经 fixed。等待他们的 0.15.2 发布或立即获取他们的 master 分支。

Answer 3

使用react-tap-event-plugin解决这个问题。安装后执行此操作 -

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

未知道具 - 反应和 material-ui

Unknown props - react and material-ui

javascript

reactjs

react-jsx

material-ui