javascript - Tillat vilkårlige data-* attributter på React-komponent med Typescript

Finnes det en måte å tillate dynamiske data-*-attributter på den nedenfor React-komponenten med Typescript? Jeg ønsker muligheten til å:

  1. Støtter className, style og andre vanlige HTML-attributter
  2. Tillat data-* attributter
  3. Tillat egendefinerte komponentegenskaper som custom
interface ITestProps {
  custom?: string;
}
export const Test: React.FunctionComponent<
  ITestProps & HTMLAttributes<HTMLDivElement>
> = ({ children, className, custom, ...rest }) => (
  <div className={className} {...rest}>
    {children} {custom}
  </div>
);

Bruk:

<Test data-some-random-text="Hello World">test</Test>

Svar #1

Fra og med TS 4.1 kan du gjøre det slik

type TestProps = { 
  custom?: string; 
} & {
  [key: `data-${string}`]: unknown;
}

Svar #2

Ikke slik du tenker, nei. Men du kan få dette til å fungere, selv om du ikke får nyttige typehint. Bare deaktiver noen eller alle (som jeg har gjort) typekontroller for komponenten din og håndter propsene direkte:

export const Test: React.FunctionComponent<any> = (props: any) => {
    let rest: any = {};
    for (let property in props) {
        if (property.indexOf("data-") === 0) {
            rest[property] = props[property];
        }
    }

    return (
        <div className={props.className} {...rest}>
            {props.children} {props.custom}
        </div>
    );
};

Min mening er at du ikke bør gjøre dette, og enten forhåndsdefinere alle egenskapene dine eller sende et enkelt objekt med all dataen din.

Relaterte artikler