javascript - Varning: React känner inte igen X-propen på ett DOM-element

Jag får detta fel när jag bara försöker skicka runt props. Mycket grundläggande saker.

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

Och sedan anropar jag komponenten MyWrapper på dess förälder där varningen kommer ifrån.

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

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

Varning: React känner inte igen handleMoveAll-egenskapen på ett DOM-element. Om du avsiktligt vill att den ska visas i DOM som en anpassad attribut, stava den som gemener handlemoveall istället. Om du av misstag skickade den från en föräldrakomponent, ta bort den från DOM-elementet.

Om jag tar bort detta handleMoveAll={() => myFunction()} försvinner varningen.

Några idéer?

Svar #1

Problemet är <div {...props}> i MyWrapper; det lägger till handleMoveAll-prop på div. Vad du kan göra är något i stil med:

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

att dra ut handleMoveAll från de skickade props, samtidigt som alla andra props fortfarande skickas in i div:en.

Svar #2

<div {...props} - detta är varför du får en varning.

handleMoveAll är inte ett giltigt attribut för ett div-element. React genererar denna varning av flera skäl, och ett av dem är när du försöker lägga till ett icke-standard DOM-attribut på ett inbyggt DOM-element.

Från React-dokumentationen - Varning för okänd egenskap:

Varningen för okänd egenskap kommer att utlösas om du försöker rendera ett DOM-element med en egenskap som inte erkänns av React som en giltig DOM-attribut/egenskap. Du bör säkerställa att dina DOM-element inte har spök-egenskaper som flyter omkring.

Lösning

För att åtgärda denna varning, lägg inte till attributet handleMoveAll på div-elementet.

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

Relaterade artiklar