Weboldal keresés

reactjs - A komponens props kiterjesztése az alapértelmezett HTML gomb props-ra helyesen

Egy gombkomponeneten dolgozom, amelynek van egy variant propja, hogy meghatározza a színét. Itt van egy egyszerűsített verzió

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

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

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

TypeScript hibát kapok az én type alatt, ami azt mondja:

(JSX attribútum) ButtonHTMLAttributes.type?: "button" | "submit" | "reset" | undefined A 'string' típus nem rendelhető a(z) '"button" | "submit" | "reset" | undefined' típushoz. ts(2322) index.d.ts(1872, 9): A várt típus a 'type' tulajdonságból származik, amely itt van deklarálva a 'DetailedHTMLProps, HTMLButtonElement>' típuson.

Szóval nem vagyok biztos benne, hogy helyesen adom-e át a gomb tulajdonságait? Talán van másik mód?

Válasz #1

Frissítés 2023

ha gombot akarsz létrehozni bármiféle extra nélkül, kiterjesztheted a React.ComponentPropsWithoutRef<"button">-ot, és azoknak, akik újrahasználható komponenst próbálnak készíteni, szükségük lesz arra, hogy forwardRef-et használjanak az alapértelmezett elemen, majd ezután használhatják a ComponentPropsWithRef-et:

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

miért nem használjuk a React.HTMLAttributes<HTMLButtonElement>-et?

ez történik, amikor ezt használod:

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>;
}

Régi válaszok

Codesandbox élő előnézet

valószínűleg amit keresel, az a 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);

a pontosabb megfogalmazás érdekében használhatjuk a React.ButtonHTMLAttributes<HTMLButtonElement>-t

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

Válasz #2

A ButtonHTMLAttributes-t kellene használnod a HTMLProps helyett így:

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

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

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

Kapcsolódó cikkek