我想知道在下面的代码中，NextJS是如何成功地区分JSX和JS的。这很简单，但我想知道引擎盖下的事情是如何工作的。具体来说，我不明白JSX是如何成功呈现的.难道{}括号没有告诉编译器括号内的内容是vanilla JS吗？为什么JS map函数渲染JSX？（可以看出，因为option元素使用className而不是classname）。然后category需要在括号内，因为它重新恢复到Javascript？有人能解释一下编译器是如何理解这一点的吗？谢谢
验证码：
<div className={styles.shopAll}>
<select className={styles.dropdown}>
{categories.map((category, index) => (
<option
key={index}
value={category}
className={selectedCategory === category ? styles.active : ""}
onClick={() => handleCategoryClick(category)}
>
{category}
</option>
))}
</select>
2条答案
按热度按时间hfyxw5xn1#
我认为在谁在做这项工作方面存在混乱。JSX在NextJS之前被Webpack/Babel解析。基本上，这只是标准
React.createElemenet()API调用的语法糖。这可能是一个很好的开始来解释它是如何工作的。
https://react.dev/reference/react/createElement#creating-an-element-without-jsx
您也可以尝试在浏览器中编译它以获得更清晰的效果。只需复制粘贴简单的JSX组件就可以更好地理解。
https://babeljs.io/repl
55ooxyrt2#
JSX允许我们用JavaScript编写HTML元素
这就是JSX允许我们做的。
括号{}不是告诉编译器括号内的东西是vanilla JS吗？
这就是JSX真正允许我们做的。
JSX允许您在JavaScript文件中编写类似HTML的标记，将呈现逻辑和内容保持在同一位置。有时候，您可能希望在标记中添加一些JavaScript逻辑或引用一个动态属性。在这种情况下，您可以在JSX中使用花括号打开JavaScript窗口。
利用javaScript和逻辑来创建和返回DOM元素（React元素）。
你可以不使用javaScript，但是当你使用javaScript时，你必须返回一个元素或元素数组
为什么JS map函数渲染JSX？
JS map函数基本上返回一个数组，最常见的用法是一个对象数组，但在我们的例子中，它应该是一个被识别为有效JSX元素的HTML元素数组（你只是不违反规则）。
另一方面，javaScript识别HTML元素，并允许它们被推入一个数组中，然后返回，这太棒了！
这就是代码的作用，所以没问题
它只是React，Nextjs使用React。