为什么我会收到此警告“不允许重复道具 react/jsx-no-duplicate-props”

Question

为什么我会收到此警告？

warning No duplicate props allowed react/jsx-no-duplicate-props#

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

Answer 1

您可能将同一个 prop 传递给一个组件两次。例如

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

Answer 2

我也遇到这个错误，我正在渲染一个组件并通过 'className' 两次。我的解决方案是在 How to apply multiple classnames to an element 处找到的。然后我将这些名字连接在一起，错误消失了，我的 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

它可以像 HTML 上的重复 id 一样简单:

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

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

关于 uppercase/lowercase Material-UI TextField 的问题，一个需要 inputProps 和 InputProps 的组件，我没有希望 ESLint 为此输出警告，所以我将其添加到我的 .eslintrc.json 文件中：

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

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 />

为什么我会收到此警告“不允许重复道具 react/jsx-no-duplicate-props”

Why am I getting this warning `No duplicate props allowed react/jsx-no-duplicate-props`

react-redux