使用 JSX 文件格式而不是 JS？ [复制]

Posted 2023-02-21

【中文标题】使用 JSX 文件格式而不是 JS？ [复制]

【英文标题】：using JSX file format instead of JS? [duplicate]

【发布时间】：2021-11-01 16:41:51

【问题描述】：

我是 VSCode 用户，每次关闭文件选项卡并再次打开时，定义语言总是令人沮丧！在反应项目中。

所以我尝试将我的 header.js 更改为 header.jsx 并且它有效，我不需要一直定义语言。

但我想知道这是否是一种好习惯，我所有的语法和 sn-ps 似乎都有效。

我可以在我的 react 项目中使用 jsx 文件格式而不是 JS 吗？

【问题讨论】：

我不必那样做；我只是打开一个 .js 文件，一切都按预期工作。你能发布你的 package.json 吗？

@ChrisG 一切正常，直到您关闭 js 文件并再次重新打开它的语言将再次变为纯 javascript

这到底是什么意思？您的 JSX 是否被标记为语法错误？就像我说的，我可以关闭 .js 文件并再次打开它们，一切都很好。在 VS 代码中。不过，我正在使用 create-react-app，它可能会相应地设置 linting。

@ChrisG 是的，除非您再次从命令面板定义语言，否则 Emmett 也无法正常工作

对，我怀疑你的 package.json 中需要一个 esLintConfig 设置；你有吗？

【参考方案1】：

使用 .jsx，如果您使用 html 代码创建 React 组件（例如组件、html 标签等，那么仅将 .js 用于纯 JavaScript 代码，例如创建 utils 等。

【讨论】：

我认为问题在于为什么文件扩展名为js时VS Code不能正常工作，以及如何解决这个问题。

当我关闭定义为javascript react的js文件并重新打开它时，它的语言定义再次变为纯js并且emmet不起作用

@IhateReact 如果这个答案没有解决您的实际问题，您为什么将其标记为已接受？

@ChrisG 我没有，我认为是触摸问题，我现在正在使用平板电脑

【参考方案2】：

如果你有 React 组件，或者文件中有更简单的 HTML 标签，你应该使用 .jsx。

如果您的文件中只有 React 钩子或不依赖于 react.js 库的函数，您可以使用 js。

【讨论】：

但是 jsx 也可以使用钩子和函数

对，但是没有意义，因为你不需要 JSX 语法支持。

React 钩子和渲染函数不是来自 react 吗？

像 react 中的 usestate 钩子

是的，但是你只需要在渲染的情况下使用 .JSX 语法，否则，你不需要它。对于 useCallback、useEffect、useMemo，你不需要 JSX 支持。仅当该文件有任何 HTML 标记时。