为什么我得到这个警告`没有重复道具允许反应/ jsx-no-duplicate-props`

Question

为什么我收到这个警告？

警告没有重复的道具允许反应/ jsx-no-duplicate-props#

它显示的是28号行,但没有任何道具正在使用.

Answer 1

您可能将相同的道具两次传递给组件.例如

<MyComponent someProp={'a'} someProp={'b'} />

Answer 2

关于 Material-UI TextField（一个采用inputProps和 的组件）的大写/小写问题InputProps，我不希望 ESLint 输出警告，因此我将其添加到我的 .eslintrc.json 文件中：

"rules": {
    "react/jsx-no-duplicate-props": [1, { "ignoreCase": false }]
  }

Answer 3

我也遇到了这个错误，我正在渲染一个组件，并两次传递了“ className”。我的解决方案是在此处找到如何将多个类名应用于元素的。然后，我将名称混在一起，错误消失了，并且UI呈现完美。

//错误

<IconButton
  color="secondary"
  className={classes.button}
  className={classes.test}
  component="span"
  classes={{
    root: classes.checkRoot,
  }}
>

//解

<IconButton
 color="secondary"
 className={[classes.button, classes.test ]}
 component="span"
 classes={{
    root: classes.checkRoot,
 }}
>

Answer 4

当在同一标签上使用任何重复属性时会出现警告，即

    <input id="a" id="b" />
    <MyComponent someProp={'a'} someProp={'b'} />
    <input placehoder="a" placeholder="a" />
    <div className='a' className='b'></div>