这些 Microsoft 文档在 JS 文件中包含 JSX 是不是错误？

Posted 2023-02-21

【中文标题】这些 Microsoft 文档在 JS 文件中包含 JSX 是不是错误？

【英文标题】：Are these Microsoft docs wrong for having JSX in a JS file?这些 Microsoft 文档在 JS 文件中包含 JSX 是否错误？

【发布时间】：2021-08-30 00:19:47

【问题描述】：

在下面的Microsoft doc（以及许多其他）中，他们将有一个明确称为App.js 的文件，但随后的代码如下：

    return (
    <>
        <h5 className="card-title">Welcome name</h5>
        accessToken ? 
            <p>Access Token Acquired!</p>
            :
            <Button variant="secondary" onClick=RequestAccessToken>Request Access Token</Button>
        
    </>
);

这不是JSX吗？我注意到这已经做了很多，它开始让我对 JS 和 JSX 有何不同感到困惑。

【问题讨论】：

这能回答你的问题吗？ ReactJS - .JS vs .JSX

@MattU 谢谢，但我之前读过，不，它没有回答我的问题。那里的最佳答案指出“任何不是“普通” javascript 的东西都应该进入它自己的扩展中”。 <h5 绝对不是普通的 JS，但根据微软的说法，它应该放在一个 JS 文件中。

它说“有人可以争论”这一点，答案并没有说明这一点。该答案的关键实际上是“您的捆绑器/转译器/负责解决存在什么类型的文件内容的任何东西。”

您是在问 JS 和 JSX 在概念上有何不同，还是仅仅是文件扩展名？扩展只是方便。

【参考方案1】：

这里的 AirBNB 仓库中有一个关于 JSX vs JS 的很好的讨论：https://github.com/airbnb/javascript/pull/985

本质上，尤其是在较大的 React 项目中，区分 .jsx 文件和 .js 文件可以归结为识别什么用作 React 组件，什么可能只是普通的 Javascript 逻辑。当涉及到读取 .jsx 和 .js 文件时，您无需担心扩展名是 .jsx 还是 .js - 它会正常运行。

所以从技术上讲，扩展名应该是.jsx，但最终没关系。