如何在reactjs中修复此警​​告“警告：React无法识别DOM元素上的`showLabel`属性。” 显示在控制台日志中

Question

如何删除此警告：React 无法识别showLabelDOM 元素上的 prop。

控制台日志上显示警告消息。

警告：React 无法识别 DOM 元素上的“showLabel”属性。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写“showlabel”。如果您不小心从父组件传递了它，请将其从 DOM 元素中删除。

Answer 1

当 React 组件 prop 最终被添加为 DOM 元素上的属性时，会出现此错误。

通常，当将 props 传递给组件，然后使用展开运算符将它们传递给另一个组件时，会出现此错误。考虑这样一个人为的例子：

const ParentComponent = () => {
  return (<ChildComponent showLabel={true} />);
}

const ChildComponent = (props) => {
  return (
    <div {...props}>blah blah blah</div>
  )
}

在这种情况下，showLabel您传递给的 propChildComponent最终会呈现为div标签上的属性，正如您看到的错误消息所示，这是不允许的。

确保您传递到组件的任何 props 都已被考虑在内，如有必要，请删除它们或解构并仅将必要的 props 传递给下一个组件：

const ChildComponent = (props) => {
  const { someLabel, ...rest } = props;
  return (
    <div {...rest}>blah blah blah</div>
  )
}