javascript - React.createRef current type in typescript - Stack Overflow

admin管理员组

文章数量:1394593

I'm trying to find what to type React.createRef as. Header is a custom ponent. header.current always says

(property) React.RefObject.current: unknown Object is of type 'unknown'.

I can set it to type <any> but that's the easy way out. How do I get Typescript to play nice and stop plaining.

Example: React.createRef<any>()

Fully code:

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

I've even tried setting it to a HTMLDivElement which is what it returns.

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

but the below still gives me an error: (property) React.RefObject.current: HTMLDivElement | null Object is possibly 'null'.

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

I'm trying to find what to type React.createRef as. Header is a custom ponent. header.current always says

(property) React.RefObject.current: unknown Object is of type 'unknown'.

I can set it to type <any> but that's the easy way out. How do I get Typescript to play nice and stop plaining.

Example: React.createRef<any>()

Fully code:

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

I've even tried setting it to a HTMLDivElement which is what it returns.

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

but the below still gives me an error: (property) React.RefObject.current: HTMLDivElement | null Object is possibly 'null'.

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

• javascript
• reactjs
• typescript

Share Improve this question Follow edited Sep 7, 2022 at 10:21 cccn 94911 gold badge88 silver badges2020 bronze badges asked Jun 4, 2020 at 20:14 me-meme-me 5,8291414 gold badges6262 silver badges115115 bronze badges 2

• Passing HTMLDivElement is correct, however the issue is, you can't call header.current directly afterwards, because the header.current can be null. It's only once the associated div element has mounted, will header.current have a reference to that element. Where are you using const el ? – user2340824 Commented Jun 4, 2020 at 21:08
• I'm calling it in a unit test. If I use <any> then ref works but when I use HTMLDivElement it doesn't – me-me Commented Jun 4, 2020 at 21:42

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

This makes sense. TypeScript is trying to warn you that calling getButtonElement on something that MIGHT be undefined is "dangerous". You can work around this by refining the type first, like this:

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

本文标签： javascriptReactcreateRef current type in typescriptStack Overflow