reactjs - Správne rozširovanie vlastností komponentu na predvolené vlastnosti HTML tlačidla

Pracujem na komponente tlačidla, ktorá má vlastnosť variant, aby sa určila jej farba. Tu je zjednodušená verzia

interface Props extends React.HTMLProps<HTMLButtonElement> {
  variant: 'yellow' | 'green';
}

function Button({ variant, ...props }: Props) {
  console.log(variant);

  return (
    <button
      type="button"
      {...props}
    />
  );
}

Dostávam chybu TypeScript pod mojím type, ktorá hovorí:

(JSX atribút) ButtonHTMLAttributes.type?: „button“ | „submit“ | „reset“ | undefined Typ 'string' nie je priraditeľný k typu '„button“ | „submit“ | „reset“ | undefined'.ts(2322) index.d.ts(1872, 9): Očakávaný typ pochádza z vlastnosti 'type', ktorá je tu deklarovaná na type 'DetailedHTMLProps, HTMLButtonElement>'

Takže si nie som istý, či správne rozširujem vlastnosti tlačidla? Možno je nejaký iný spôsob?

Odpoveď č. 1

Aktualizácia 2023

ak chcete vytvoriť tlačidlo bez akýchkoľvek extra vecí, môžete rozšíriť React.ComponentPropsWithoutRef<"button"> a pre ľudí, ktorí sa snažia vytvoriť opakovane použiteľnú komponentu, budete musieť forwardRef použiť na základný element a potom môžete použiť ComponentPropsWithRef:

interface Props extends React.ComponentPropsWithoutRef<"button"> {
  variant: 'yellow' | 'green';
}

prečo nepoužiť React.HTMLAttributes<HTMLButtonElement>?

toto sa stane, keď použijete:

export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
  /* etc */
}

function App() {
  // Property 'type' does not exist on type 'IntrinsicAttributes & ButtonProps'
  return <Button type="submit"> text </Button>;
}

Staré odpovede

Živá ukážka Codesandbox

pravdepodobne hľadáte React.HTMLAttributes<HTMLButtonElement>

import * as React from "react";
import { render } from "react-dom";

import "./styles.css";

interface Props extends React.HTMLAttributes<HTMLButtonElement> {
  variant: 'yellow' | 'green';
}

function Button({ variant, ...props }: Props) {

  return (
    <button
      type="button"
      {...props}
    />
  );
}

const rootElement = document.getElementById("root");
render(<Button variant='green' />, rootElement);

aby sme boli presnejší, môžeme použiť React.ButtonHTMLAttributes<HTMLButtonElement>

import * as React from "react";
import { render } from "react-dom";

import "./styles.css";

interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant: 'yellow' | 'green';
}

function Button({ variant, ...props }: Props) {

  return (
    <button
      type="button"
      {...props}
    />
  );
}

const rootElement = document.getElementById("root");
render(<Button variant="green" />, rootElement);

Odpoveď č. 2

Mali by ste použiť ButtonHTMLAttributes namiesto HTMLProps, ako je toto:

interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant: 'yellow' | 'green';
}

function Button({ variant, ...props }: Props) {
  console.log(variant);

  return (
    <button
      type="button"
      {...props}
    />
  );
}

Súvisiace články