React与JSX开发常见问题解析

最新推荐文章于 2025-10-21 16:13:52 发布

原创

最新推荐文章于 2025-10-21 16:13:52 发布 · 996 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#React # JSX # Babel

1、脚本元素上的“type=text/babel”属性表明内容是JSX，而非常规JavaScript（若不指定类型则为默认）。Babel编译器会将所有此类脚本元素编译为JavaScript并注入回去。如果移除Babel编译器或类型属性会发生什么？

移除 Babel 编译器或类型属性会导致脚本无法编译为 JavaScript ，并在 JavaScript 控制台引发错误。

2、如何在 JSX 中指定类？

在 JSX 中，由于 class 是 JavaScript 的保留字，不能直接使用 class 属性来指定 HTML 元素的类。需要使用 className 属性来指定类。示例代码如下：

import React from 'react';

const MyComponent = () => {
  return (
    <div className="my-class">
      这是一个使用了类的 div 元素。
    </div>
  );
};

export default MyComponent;

在上述代码中， className="my-class" 就为 div 元素指定了类名 my-class 。

3、React的压缩版本和非压缩版本有什么区别？

React的压缩版本会隐藏或缩短运行时错误，而非压缩版本会给出完整的错误信息和有用的警告。

4、包文件安装在哪里？npm ls 命令有什么作用？–depth = 0 有什么作用？如何确保有一个干净的开始？

包文件安装在项目目录下。

npm ls 用于列出当前安装的所有包。
--depth=0 表示只显示顶层安装的包，不显示依赖包的层级信息。

要确保干净的开始，可以清理不需要的包：

通过 npm ls --depth=0 查看当前安装的包。
然后卸载不需要的包。

5、如何使用静态文件 hello.html 访问应用程序？

你必须使用文件的名称来访问应用程序，如下所示：

http://localhost:3000/hello.html

6、如何通过不同的挂载点访问静态文件？

在中间件生成的辅助函数中，将前缀作为第一个参数指定，目录名作为第二个参数。例如：

express.static('/public', 'static')

7、现在App.jsx包含什么内容？JSX发生了什么变化？

现在 App.jsx 包含导入 IssueList 类并渲染该组件的代码，内容如下：

import IssueList from './IssueList.jsx';
const contentNode = document.getElementById('contents');
ReactDOM.render(<IssueList />, contentNode);

之前JSX在 index.html 中，后来分离到 App.jsx 文件中，一开始由 babel 库脚本进行转换，后续会将转换移到构建时。此外， App.jsx 还使用了ES2015特性进行了重写。

8、在开发中，我们肯定会使用哪种转换，还可以考虑哪些其他有用的转换？

我们肯定会使用的转换是将 JSX 转换为纯 JavaScript 的转换，需要安装 babel-cli 和 babel-preset-react 工具来实现。还可以考虑的有用转换包括将 ES2015 代码转换为 ES5 JavaScript 的转换，可通过安装 babel-preset-es2015 插件来实现。