警告：React 无法识别 DOM 元素上的 X 属性

Question

当我试图传递道具时，我收到了这个错误。非常基本的东西。

interface Props extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, ChakraProps {
  handleMoveAll: () => void
}

export const MyWrapper: FC<Props> = (props): JSX.Element => (
  <div {...props}>
    <IconBox label="Move All" onClick={props.handleMoveAll}>
      <MyIcon />
    </IconBox>
  </div>
)

然后我在其父级上调用组件MyWrapper 发出警告。

export const ParentComp: FC<{}> = (): JSX.Element => {
  const myFunction = () => console.log('Hit it')

  return (
      <MyWrapper handleMoveAll={() => myFunction()}>
         <p>Child Component</p>
      </MyWrapper>
  )
}

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

如果我删除这个handleMoveAll={() => myFunction()}，警告就会消失。

有什么想法吗？

Answer 1

<div {...props} - 这就是您收到警告的原因。

handleMoveAll 不是div 元素的有效属性。 React 产生这个警告的原因有很多，其中之一是当您尝试在原生 DOM 元素上添加非标准 DOM 属性时。

来自React Docs - Unknown Prop Warning:

如果您尝试渲染 DOM，将触发 unknown-prop 警告 带有一个未被 React 识别为合法 DOM 的 prop 的元素 属性/属性。你应该确保你的 DOM 元素不 有虚假的道具漂浮在周围。

解决方案

要修复此警告，请勿在 div 元素上添加 handleMoveAll 属性。

const MyWrapper: FC<Props> = ({ handleMoveAll, ...restProps }): JSX.Element => (
  <div {...restProps}>
    <IconBox label="Move All" onClick={handleMoveAll}>
      ...
    ...
  ...
)

Answer 2

问题是<div {...props}>中的MyWrapper；将handleMoveAll 属性添加到 div 中。你可以做的是：

export const MyWrapper: FC<Props> = (props): JSX.Element => (
  const {handleMoveAll, ...rest} = props;
  <div {...rest}>
    <IconBox label="Move All" onClick={handleMoveAll}>
      <MyIcon />
    </IconBox>
  </div>
)

从传入的 props 中取出 handleMoveAll，同时仍将任何其他 props 传递到 div 中。