reactjs - Hur man säkerställer att en React-komponent har 'key'-prop i TypeScript

Hur kan jag skriva en TypeScript-variabel så att den kräver en komponent med key satt?

Jag vill ha något som detta:

const foo: ReactElementWithKey = <div key="some key"></div> 
// all ok

const bar: ReactElementWithKey = <div></div> 
// no `key` - typescript should show an error

Hur ska jag definiera ReactElementWithKey ?

Jag har försökt med något liknande:

type ReactElementWithKey = React.ReactElement<{ key: React.Key }>;

Men det fungerar inte - komponenter utan key accepteras utan problem.

Svar #1

En sak du kan prova är att använda en anpassad version av <div>-komponenten, på detta sätt:

import React from 'react';

// required non-null key prop
interface WithKeyProps {
    key: React.Key;
}

// custom div wrapper
const DivWithKey = (props: React.HTMLAttributes<HTMLDivElement> & WithKeyProps) => {
    return (
        <div {...props}>
            {props.children}
        </div>
    );
}

const foo = <DivWithKey key='' />;
// all ok
const bar = <DivWithKey />;
// no `key` - typescript shows an error

Lekplatslänk

Problemet är att detta endast gäller för <div>, så detta kanske inte riktigt löser problemet.

Svar #2

Du kan inte.

Först och främst är alla renderade React-komponenter bara typen JSX.Element. All typinformation om vad som renderades går förlorad vid rendering. Så du kan inte typa en variabel att endast acceptera vissa renderade React-komponenter.

För det andra är key en reserverad prop av React. Varje komponent accepterar det valfritt.

Jag är inte säker på exakt vad du försöker göra, men det finns förmodligen ett bättre sätt.

Relaterade artiklar