Question

在使用新的Material UI（从本文发布的版本1.0.0-beta.33）时，我在使用prop外壳方面遇到了很多麻烦。似乎withStyles在某些情况下任意允许使用camelCased道具而不是其他情况。

例如：

<ChipInput
    dataSource={defaultGroups}
    defaultValue={this.state.groups}
    fullWidth={true}
    label="Test Groups"
    newChipKeyCodes={[9, 13, 32, 186, 188]}
    onChange={chips => this.submitForm(field, this.state.groups, chips.toString())}
    openOnFocus={true}
/>

在使用最新的Material UI时，我反复看到过这种情况。在这种情况下，我使用名为openOnFocus的道具Material-ui-chip-input库（版本1.0.0-beta.3），我在控制台中收到此错误：

Warning: React does not recognize the `openOnFocus` prop on a DOM element. 
If you intentionally want it to appear in the DOM as a custom attribute, 
spell it as lowercase `openonfocus` instead. If you accidentally passed it 
from a parent component, remove it from the DOM element.
in div (created by Input)
in Input (created by WithStyles(Input))
in WithStyles(Input) (created by ChipInput)
in div (created by ChipInput)
in div (created by FormControl)
in FormControl (created by WithStyles(FormControl))
in WithStyles(FormControl) (created by ChipInput)
in ChipInput (created by WithStyles(ChipInput))
in WithStyles(ChipInput)
in div
in Unknown (created by ConnectedField)
in ConnectedField (created by Connect(ConnectedField))
in Connect(ConnectedField) (created by Field)
in Field (created by TestMethodDetails)
in div (created by TestMethodDetails)
in div (created by TestMethodDetails)
in div (created by TestMethodDetails)
in form (created by TestMethodDetails)
in div (created by TestMethodDetails)
in TestMethodDetails (created by Form(TestMethodDetails))
in Form(TestMethodDetails) (created by Connect(Form(TestMethodDetails)))
in Connect(Form(TestMethodDetails)) (created by ReduxForm)
in ReduxForm (created by Connect(ReduxForm))
in Connect(ReduxForm) (created by ProjectTestMethodView)
in div (created by ProjectTestMethodView)
in ProjectTestMethodView (created by Connect(ProjectTestMethodView))
in Connect(ProjectTestMethodView) (created by Route)
in Route (created by ProjectView)
in div (created by ProjectView)
in div (created by ProjectView)
in ProjectView (created by Connect(ProjectView))
in Connect(ProjectView) (created by Route)
in Route (created by App)
in Switch (created by App)
in div (created by App)
in section (created by Content)
in Content (created by Connect(Content))
in Connect(Content) (created by Layout)
in div (created by Layout)
in Layout (created by App)
in div (created by App)
in MuiThemeProvider (created by App)
in App (created by Connect(App))
in Connect(App) (created by Route)
in Route (created by withRouter(Connect(App)))
in withRouter(Connect(App))
in Router (created by ConnectedRouter)
in ConnectedRouter
in AppContainer
in Provider

为什么我无法将openOnFocus与素材UI主题一起使用，但它不会抱怨像fullWidth这样的其他道具？我可以在正常的反应组件上使用camelCase道具就好了。

Answer 1

问题不在于material-ui不会接受骆驼案例道具。您可以查看all these components with camel case props来确认。

问题是React会only accept certain props on DOM elements。因此，如果HTML标记收到React无法识别的道具，您将收到您提到的警告。您可以使用以下代码段重现该内容：

<button someRidiculousAndClearlyInvalidProp={this.myFunc} />

我无法向您提供正在发生的具体位置，因为我无法使用ChipInput和openOnFocus（material-ui版本0.20.0和material-ui-chip-input 0.18.6）重现您的问题）。如果您提供确切的版本号（或者更好的CodePen），我可以看看是否能找到确切的问题。

但是，我要注意，此警告通常由以下模式引起：

const MyComponent = (props) => {
  const { oneProp, ...other } = props;

  return (
    <div {...other}>
      { oneProp ? "set" : "not set"}
    </div>
  );
};

请注意MyComponent获取所有未使用的道具，将其存储在other中，然后将其展开给...other的孩子。这种模式很棒，因为它可以提供非常灵活的API。例如，此模式允许客户端以组件设计者可能没有计划的方式在onMouseEnter上设置div或其他任意支柱。

但是，请考虑如果客户意外泄露了someRidiculousAndClearlyInvalidProp这样未使用过的道具会发生什么。道具将以...other结束，然后传播div，导致未知道具警告。

这种模式在材料中很常见。您可以查看示例here（仅搜索...other以查找示例）。如果我不得不下注，我会认为具有这种模式的组件以及错位，拼写错误或遗忘的道具是您问题的根源。

使用复制进行编辑

是的，这正是我的想法。 openOnFocus道具已从material-ui-chip-input版本1中删除。您可以看到它不再是in the docs和it's been commented out of the source code。例如，请看411行。

由于openOnFocus不再是有效的道具，因此它的作用方式与someRidiculousAndClearlyInvalidProp的作用方式相同，错误会从我上面描述的确切机制中抛出。

所以，同样，材料-ui肯定没有驼峰案例道具的问题。相反，此错误几乎总是由无效道具传播到根组件引起的。所以，只要看到这个错误就到处检查，检查一下是否确保一切正确，并使用有记录的有效道具。

为什么Material UI的“withStyles”不允许使用camelCase道具？

1 个答案:

使用复制进行编辑