警告:React不能识别DOM元素上的X prop

Question

我得到这个错误时，我只是试图传递props。非常基本的东西。

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元素上的handleMoveAllprop。如果你有意想让它出现在DOM中作为一个自定义属性，拼写为小写的handlemoveall代替。如果你不小心从父组件传递了它，就把它从DOM元素中移除。

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

任何想法?

Answer 1

问题是MyWrapper中的<div {...props}>;将handleMoveAllprop添加到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中。

Answer 2

<div {...props}-这就是为什么你得到一个警告。

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

来自React Docs - Unknown Prop警告:

如果尝试渲染DOM，则会触发unknown-prop警告元素的prop不能被React识别为合法的DOM属性/属性。您应该确保DOM元素不会这样做有虚假的道具浮动。

解决方案要修复此警告，请不要在div元素上添加handleMoveAll属性。

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