javascript - React Typescript elementtyper


Vad är typen av följande uttryck i React?

let element = <div>Blah blah</div>

Jag trodde att jag kunde använda element: HTMLElement men när jag gör det får jag Property 'accessKey' is missing in type 'Element'.

Vad sägs om en annan importerad komponent?

import Row from './partials/Row';
let row = <Row cols={cols} />

Svar #1

Typen för div jsx-elementet är HTMLFactory<HTMLDivElement>.

Referensen du har är inte för ett faktiskt DOM-element i webbläsaren utan för ett React-element som representerar ett sådant element som kanske inte har renderats än.

HTML-egenskaperna bör nås genom props:

let element = <div>Blah blah</div>
console.log(element.props.accessKey);

Om du vill få DOM-elementet kan du använda ref-attributet:

När ref-attributet används på ett HTML-element, tar ref-callbacken emot det underliggande DOM-elementet som sitt argument

Så :

let divElement: HTMLDivElement;
let element = <div ref={ (el) => { divElement = el; console.log(el); } }>Blah blah</div>

I fallet med den importerade Row har du återigen en referens till ett React-element som har en DOM-representation.
Vilka egenskaper eller metoder det har beror på själva klassen.

Relaterade artiklar