Menu
I am trying to defined a props interface for my Component and would like it to include all common attributes.
but found out there are two different interface i can extend
interface MyProps extend React.HTMLProps<HTMLElement>
and
interface MyProps extend React.HTMLAttributes<HTMLElement>
what is the difference? which one should I use? seems like HTMLProps includes HTMLAttributes, does it mean HTMLProps should be a better candidates?
559
IntrinsicAttributes interface can be used to specify extra properties used by the JSX framework which are not generally used by the components' props or arguments - for instance key in React.
The definition for React. ElementType is basically “any valid HTML element or another React component.” So 'label' can be a valid value for as because it is extends React.
The call signature of ForwardRefRenderFunction takes a props object, which must include a member children and a ref object as parameters, whereas the call signature of ForwardRefExoticComponent only takes a props object of arbitrary shape as parameter.
tsx file to: import * as React from "react"; import * as ReactDOM from "react-dom"; import FirstComponent from './components/FirstComponent' ReactDOM. render( <div> <h1>Hello, Welcome to React and TypeScript</h1> <FirstComponent/> </div>, document. getElementById("root") );
HTMLProps contains more stuff than HTMLAttributes. Stuff like ref etc.
I've done the following in the past :
export interface PrimitiveProps extends React.HTMLProps<HTMLDivElement> { };
And it has worked out fine for me 🌹
147
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
