The way to handle it being a valid JSX element and access its props is by pretending that it is a normal component. Although it doesn't behave like the other types of components (FunctionComponent is the main one now as StatelessComponent has been deprecated with the introduction of hooks), there's no other way implemented to tell the JSX parser that this is a JSX element type. This is exactly the case for React.Fragment. This declaration allows for developing a special kind of component that would not act as a regular React component. But what about the ExoticComponent interface, what does it have to do with react fragments? The second part makes a lot of sense as the nodes added to the DOM are the children nodes of the fragment component we apply. It is declared using the ExoticComponent TypeScript interface and it specifies a prop `children` which is set to be a ReactNode.
Bonus - A look into the internals of React Fragmentīy digging into the react codebase we can tell how the React.Fragment component works internally. The fragments can be applied directly to the return of a React component, inside functions that return JSX, in conditional rendering, and pretty much anywhere else a valid react component can be used.īesides avoiding adding an unnecessary element to the DOM, fragments are also the solution to not break the rules of the HTML syntax, as in the `` element example where its parent node must be either ``, `` or ``. If there's no key or attributes set, the short syntax can be applied and both approaches deliver the same result.
An example would be when mapping items from an array to JSX.
#Key on react fragment full#
The most common case where the full syntax is required is when dealing with cases where a key is required by React so that, internally, it can uniquely identify a given node.
0 kommentar(er)
