二、React 中的JSX语法

最新推荐文章于 2024-04-28 09:21:09 发布

原创最新推荐文章于 2024-04-28 09:21:09 发布 · 246 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #ecmascript

React 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了React中的JSX语法，包括如何定义虚拟DOM、使用JS表达式、添加类名与内联样式，以及处理根标签、小写字母标签和数组遍历的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文链接：React笔记

JSX允许开发人员在JavaScript代码中编写类似于HTML的标记，以描述UI的结构和外观。

1）定义虚拟DOM

const VDOM = (
    <h1 id="title">
        <span>Hello Jvyou</span>
    </h1>
)

换行需要用小括号包裹所有的结构

2）使用JS表达式

const id = "title"
const content = "Hello Jvyou"
const VDOM = (
    <h1 id={id}>
        <span>{content}</span>
    </h1>
)

标签中使用JS表达式需要使用{}

一般不使用

3）添加类名

先写一段css样式

<style>
.title {
    background-color: aqua;
}
</style>

我们想要给虚拟DOM添加上面的样式

const VDOM = (
    <h1 class="title">
        <span>{content}</span>
    </h1>
)

控制台报错

类名指定不能用class，而是className，class是ES6定义类关键字

const VDOM = (
    <h1 className="title">
        <span>Hello Jvyou</span>
    </h1>
)

4）内联样式

给虚拟DOM添加内联样式

const VDOM = (
    <h1 style="color:red">
        <span>Hello Jvyou</span>
    </h1>
)

控制台报错

1、根据报错我们发现style属性不能添加字符串，而是使用对象

2、使用双括号，第一个括号用于解析JS表达式，第二个为对象外侧的括号

2、多单词的样式使用小驼峰命名

const VDOM = (
    <h1 style={{color:"red",backgroundColor:"#000"}}>
        <span>Hello Jvyou</span>
    </h1>
)

5）根标签只能有一个

下面代码出现两个根标签h1和input，直接语法上报错

const VDOM = (
    <h1 style={{color:"red",backgroundColor:"#000"}}>
        <span>Hello Jvyou</span>
    </h1>
    <input type="text">
)

正确写法：

const VDOM = (
    <>
        <h1 style={{color: "red", backgroundColor: "#000"}}>
            <span>Hello Jvyou</span>
        </h1>
        <input type="text"/>
    </>
)

使用<></>或者<div></div>标签将所有的内容包裹进来

6）小写字母标签

我们在VDOM里面随便添加一个小写开头的标签 <jvyou>

const VDOM = (
    <div>
        <h1 style={{color: "red", backgroundColor: "#000"}}>
            <span>Hello Jvyou</span>
        </h1>
        <jvyou>橘柚</jvyou>
    </div>
)

控制台报错

小写字母开头的VDOM会被转化成对应标签名称的真实DOM，但是不符合HTML定义的标签会报错，因此不能瞎写，根据报错我们发现，HTML没有规定的标签会被当成组件处理，而组件是大写开头。

7）JSX遍历数组

需求：将数组里面的内容转化成li标签渲染到页面上

准备结构：

const data = ['jvyou', 'ymm', 'lkc', 'yy', 'zwq']

const VDOM = (
    <div>
        <ul>

        </ul>
    </div>
)

我们可以首先直接将数组放在页面上查看效果

const data = ['jvyou', 'ymm', 'lkc', 'yy', 'zwq']

const VDOM = (
    <div>
        <ul>
            {data}
        </ul>
    </div>
)

我们发现，JSX会自动遍历数组，将数组的内容渲染到界面上

在前面我们说过{}可以调用表达式，表达式是一种计算并生成值的代码片段。表达式可以包括各种值、变量、运算符和函数调用

我们想要将数组转化成标签，我们可以使用数组的API进行转化成新的数组，这样重新让JSX替我们遍历。

const data = ['jvyou', 'ymm', 'lkc', 'yy', 'zwq']

//通过map函数，将原来的数组转化成新的数组
const VDOM = (
    <div>
        <ul>
            {data.map(s => <li>{s}</li>)}
        </ul>
    </div>
)

注意：通过map函数返回的仍然是一个VDOM，不能加双引号

运行结果：

此时虽然能运行出来但是控制台报错了

通过报错内容我们了解到循环遍历VDOM需要给每一个DOM指定一个key,来保证DOM的唯一性

const VDOM = (
    <div>
        <ul>
            {data.map((s, index) => <li key={index}>{s}</li>)}
        </ul>
    </div>
)

注意这里面给key赋值只需要key的值为一即可，这里面给定index实际上是不合理的