为什么我会收到此警告“无重复的道具允许React/JSX-No-Duplate-Props”

Question

为什么我要警告？

警告禁止重复道具允许React/JSX-NO-DUPLICATE-PROPS＃

它显示了第28行，但没有任何道具使用。

Answer 1

您可能会三思将同一道具传递给组件。例如

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

Answer 2

我也遇到此错误，我正在渲染一个组件并两次传递'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 3

涉及材料-UI Textfield的大写/小写问题，该组件是inputProps和InputProps，我不希望ESLINT为此输出警告，因此我将其添加到我的。eslintrc.json文件：

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

Answer 4

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

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

Answer 5

它可以像html上的重复ID一样简单：

<input id="txt-id" id="txtID" />

Answer 6

它可以是以下之一：

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

Answer 7

只是想分享这一点，因为我没有将其视为可能的错误。但是，当我有两个输入需要两个时，我会遇到这个问题。

示例：

<input required type="email" name="form-email" required />

应该是：

  <input type="email" name="form-email" required />