【react从入门到精通】React JSX详解

2023-09-25 149

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

可观测可视化 Grafana 版，10个用户账号 1个月

应用实时监控服务-可观测链路OpenTelemetry版，每月50GB免费额度

可观测监控 Prometheus 版，每月50GB免费额度

简介： React JSX是一种在React中使用的JavaScript扩展语法，它允许我们使用类似HTML的语法来创建React元素和组件。使用JSX可以更方便地编写React应用程序，并使代码更易于阅读和理解。

前言

在上一篇文章《React生命周期》中我们了解了React的生命周期，深入分析了React每个生命周期的意义。了解了利用生命周期中的函数能够帮助我们实现什么样的功能以及为什么要这么做。有了以上的只是基础我们对React的理解又更近一步。更够写出更加健壮完善的代码。

本文中我们将详细了解React中的JSX，以及需要注意的一些语法规则。

React技能树

React 技能树
├── JSX
│   ├── 语法
│   ├── 元素渲染
│   ├── 组件
│   ├── Props
│   ├── State
│   └── 生命周期
├── 组件通信
│   ├── 父子组件通信
│   ├── 兄弟组件通信
│   ├── 跨级组件通信
│   ├── Context
│   └── Redux
├── 样式
│   ├── 内联样式
│   ├── CSS Modules
│   └── Styled Components
├── 路由
│   ├── React Router
│   ├── 动态路由
│   └── 嵌套路由
├── 数据请求
│   ├── Axios
│   ├── Fetch
│   └── GraphQL
├── 状态管理
│   ├── Redux
│   ├── MobX
│   └── Recoil
├── 常用库和框架
│   ├── Ant Design
│   ├── Material UI
│   ├── Bootstrap
│   ├── Semantic UI
│   └── Tailwind CSS
├── 测试
│   ├── Jest
│   ├── Enzyme
│   └── React Testing Library
├── 构建工具
│   ├── Webpack
│   └── Parcel
└── 服务端渲染
    ├── Next.js
    └── Gatsby

什么是JSX

JSX是一种语法扩展，它将HTML和JavaScript代码结合起来，使得我们能够在JavaScript代码中编写类似HTML的标记。在React中，我们可以使用JSX来描述组件的结构和样式，它提供了一种简洁、清晰的方式来表达我们的意图。

在React中，JSX被编译为普通的JavaScript函数调用，所以我们可以在JavaScript中使用它。具体来说，JSX被编译为React.createElement函数的调用，该函数接受三个参数：要创建的元素类型、元素的属性和子元素。

下面是一个简单的JSX示例：

const element = <h1>Hello, world!</h1>;

在这个例子中，我们定义了一个名为element的变量，它的值是一个JSX元素，代表一个h1标签，包含文本"Hello, world!"。下面是相应的JavaScript代码：

const element = React.createElement(
  'h1',
  null,
  'Hello, world!'
);

在这个例子中，我们使用React.createElement函数创建了一个名为element的变量，它的值与JSX示例的值相同。第一个参数是元素类型，这里是'h1'字符串；第二个参数是元素的属性，这里是null；第三个参数是子元素，这里是字符串'Hello, world!'。

JSX的基本语法规则

1.JSX必须有一个顶层元素

在JSX中，我们必须将所有的标签包裹在一个顶层元素中。如果有多个顶层元素，我们需要使用一个容器元素将它们包裹起来。例如：

const element = (
  <div>
    <h1>Hello, world!</h1>
    <p>Welcome to my website.</p>
  </div>
);

在这个例子中，我们将h1和p标签包裹在一个div标签中，以便它们成为顶层元素。

2.JSX标签必须有一个结束标记，或者是自闭合的

在JSX中，所有的标签都必须有一个结束标记，或者是自闭合的。例如：

// 有结束标记的标签
<h1>Hello, world!</h1>

// 自闭合的标签
<img src="image.jpg" alt="example" />

3.JSX中可以使用JavaScript表达式

在JSX中，我们可以在标记中使用JavaScript表达式，用花括号{}包裹。例如：

const name = 'React';
const element = <h1>Hello, {
   
   name}!</h1>;

在这个例子中，我们定义了一个名为name的变量，它的值是字符串'React'。我们在h1标签中使用了一个JavaScript表达式{name}，它将被替换为变量name的值。

4.JSX中的样式和HTML中的样式有所不同

在HTML中，我们可以直接在元素上使用style属性，并在属性值中使用CSS语法来描述样式，例如：

<div style="color: red; font-size: 24px;">Hello, world!</div>

而在JSX中，我们也可以使用style属性来指定元素的样式，但是属性值必须使用JavaScript对象来表示。例如：

const style = {
   
   
  color: 'red',
  fontSize: '24px',
};
const element = <div style={
   
   style}>Hello, world!</div>;

可以看到，我们首先定义了一个名为style的JavaScript对象，它包含了color和fontSize两个属性，并分别指定了它们的值为'red'和'24px'。然后，我们在JSX中使用style属性，并将style对象作为属性值传递给div元素。

需要注意的是，JSX中的style属性与HTML中的style属性语法有所不同，我们必须使用JavaScript对象来表示样式，并使用驼峰式命名法来表示CSS属性名。例如，CSS中的属性background-color在JavaScript对象中表示为backgroundColor。

5.JSX中的class属性必须写成className

在JSX中，我们使用className属性来指定元素的class，而不是使用HTML中的class属性。例如：

const element = <div className="container">Hello, world!</div>;

在这个例子中，我们使用了className属性来指定div元素的class为'container'。

6.JSX中的style属性必须使用对象来表示

在JSX中，我们使用style属性来指定元素的样式，而不是使用HTML中的style属性。但是，与HTML中不同的是，在JSX中，我们需要使用一个JavaScript对象来表示样式。例如：

const style = {
   
   
  color: 'red',
  fontSize: '24px',
};
const element = <div style={
   
   style}>Hello, world!</div>;

在这个例子中，我们定义了一个名为style的变量，它的值是一个包含color和fontSize属性的对象。我们使用style属性来指定div元素的样式为这个对象。

JSX中的注释与HTML中的注释有所不同。
在JSX中，我们使用花括号和注释符号/ /来表示注释，而不是使用HTML中的。例如：

const element = (
  <div>
    {
   
   /* 这是一个注释 */}
    <h1>Hello, world!</h1>
  </div>
);

在这个例子中，我们在JSX中使用注释符号/ /来表示注释，它们将被编译为JavaScript中的注释。

总结

在React中，JSX提供了一种简洁、清晰的方式来描述组件的结构和样式。它结合了HTML和JavaScript代码，使得我们能够在JavaScript代码中编写类似HTML的标记。

在使用JSX时，需要注意一些语法规则，例如必须有一个顶层元素、标签必须有结束标记或自闭合、样式必须使用对象来表示等。掌握JSX的使用方法对于开发React应用非常重要。

✍创作不易，求关注😄，点赞👍，收藏⭐️