6
A Small Trick about JSX Tag Names
source link: https://dev.to/a89529294/a-small-trick-about-jsx-tag-names-4edo
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
We all know that when writing JSX tags we need to use lowercase with native DOM elements such as <div/> and we need to capitalize our custom components like this<MyCustomComponent/>.
What we may not understand is what goes on in the background when Babel compiles our code. When it comes to JSX Babel needs to transform it into JavaScript so the browser can understand our code.
Case One - Lower Case JSX Tag
<div>...</div> gets turned into React.createElement('div',....); Babel essentially treats div as a string.
Case Two - Capitalized JSX Tag
<MyVariable>..</MyVariable> gets turned into React.createElement(MyVariable, ...) Note that MyVariable do not need to be a React component, it is a plain old JavaScript variable!
CodeSandBox Example on Dynamic Wrapper
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK