时间戳

首页 > 解决方案 > 警告：React 无法识别 DOM 元素上的 X 属性

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

问题描述

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

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 无法识别handleMoveAllDOM 元素上的 prop。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写字母handlemoveall。如果您不小心从父组件传递了它，请将其从 DOM 元素中移除。

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

有任何想法吗？

标签： javascriptreactjstypescriptecmascript-6

解决方案

问题<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>
)

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

推荐阅读