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

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

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

有任何想法吗？

Answer 1

问题<div {...props}>在于MyWrapper；将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>
)

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