JSX.Element vs React.ReactNode

Рет қаралды 39,053

Matt Pocock

4 ай бұрын

Пікірлер: 21

@mohammadaminmemarzadeh45 4 ай бұрын

Jsx.element is literally jsx element

@Thassalocracy 4 ай бұрын

In set terms, JSX.Element is a subset of React.ReactNode.

@lukasmolcic5143 4 ай бұрын

thank you, this makes perfect sense since there is un underlying type difference in html itself where Element is a type of a dom Node

@orderandchaos_at_work 4 ай бұрын

Thanks for this. Drives me crazy when people get this wrong.

@mosescosme8629 4 ай бұрын

I learned this the hard way with layout components.

@coolmind2476 Ай бұрын

Why react developers dont extend the definition of JSX.Element to include strings or Numbers? Why to have separate type reactnode?

@otiamaino2461 Ай бұрын

Weird if they learnt js this shouldn’t be a problem I mean DOM nodes are anything from a tag to a text, and HTMLElements are html tags 🤲🏾

@shapelessed 4 ай бұрын

So... A React.ReactNode is essentially just anything that's valid HTML like strings and numbers, where JSX.Element is just JSX which must include a parent tag or ... Got it

@willi1978 4 ай бұрын

don't trust people touching the screen with fingers

@user-gv9tt5un9f 4 ай бұрын

Perfectly right

@christianflores3437 4 ай бұрын

Uh huh me scrolling through wishing i can code in a job

@gubatenkov 4 ай бұрын

dude froze indoors

@ophirbucai 4 ай бұрын

Null can be considered a ReactNode too

@mattpocockuk 4 ай бұрын

Yep!

@BlurryBit 4 ай бұрын

heh so I have been using element: Element | string | number where I could just have used element: ReactNode 😮 Noted sir! 😊

@robertsandiford6223 4 ай бұрын

ReactNode can also be null, boolean and and I think undefined or an array of nodes.

@BlurryBit 4 ай бұрын

@@robertsandiford6223 Yes for sure. Point being that all of the ones in the original comment could have been covered by ReactNode.

@robertsandiford6223 4 ай бұрын

@@BlurryBit Yep I agree. Depends whether you want those extra types in there though? Types are not just to make squigglies to go away, but also to catch mistakes, right?

@BlurryBit 4 ай бұрын

@@robertsandiford6223 catch mistakes while typing, absolutely! In most cases I need the element, or a string. Even number is not needed in 90% of these cases. For something more narrow, Element could be used.