javascript - React.createRef aktuell typ i typescript

Jag försöker hitta vad jag ska skriva React.createRef som. Header är en egen komponent. header.current säger alltid

(egendom) React.RefObject.current: okänd Objekt är av typen 'okänd'.

Jag kan ställa in det till att skriva <any> men det är den lätta vägen ut. Hur får jag Typescript att samarbeta och sluta klaga.

Example: React.createRef<any>()

Fullständig kod:

   const header = React.createRef();
    const { container } = render(
      <Header{...props} headerRef={header} />,
    );
    const el = header.current.getButtonElement("button");

Jag har till och med försökt ställa in det till ett HTMLDivElement vilket är vad det returnerar.

const header = React.createRef<HTMLDivElement>();

men nedanstående ger mig fortfarande ett fel: (egenskap) React.RefObject.current: HTMLDivElement | null Objektet kan eventuellt vara 'null'.

const el = header.current.getButtonElement("button");

Svar #1

Detta är logiskt. TypeScript försöker varna dig för att anropa getButtonElement på något som KAN vara undefined är "farligt". Du kan kringgå detta genom att först förfina typen, så här:

const header = React.createRef<HTMLDivElement>();

// In test
const currentHeader = header.current;
if (!currentHeader) {
    // Handle the case where header isn't set yet
}

currentHeader.getButtonElement("button"); // At this point TypeScript knows currentHeader can't be null so the type check passes

Relaterade artiklar