javascript - sprid props i react med typescript

När jag först började anpassa TypeScript i React, märkte jag att jag inte kan använda ...props, eftersom TypeScript kontrollerar varje enskild prop som skickas in i komponenterna. Det är bra men det är också irriterande, då jag måste skicka in inbyggda props som id, name etc. deklarativt som props.

interface MyComponentProps {
  name: string,
  id: string,
  placeholder: string
}

const MyComponent = ({
  name,
  id,
  placeholder
}: MyComponentProps) => {
  return <input type="text" placeholder={placeholder} name={name} id={id}/>
}
export default function App() {
  return (
    <div className="App">
      <MyComponent placeholder="Name" name="something" id="myInput" />
    </div>
  );
}

Svar #1

Du bör redigera ditt gränssnitt så att det utökar egenskaperna för HTML input-elementet:

interface MyComponentProps extends InputHTMLAttributes< HTMLInputElement>)  {
  // add other custom props
}

const MyComponent: React.FC<MyComponentProps> = (props) => (...)

Svar #2

Du kan uttryckligen göra en typomvandling till HTMLAttributes

Deklarera ett gränssnitt som union av komponentens egenskaper med HTML-attribut

interface MyComponentProps = {}

const MyComponent: React.FC<MyComponentProps & HTMLAttributes>...

Detaljerad förklaring kan du hitta här: https://stackoverflow.com/a/40032869/4186110