React 学习笔记：JSX 语法

JSX

JSX 是 JavaScript XML 的简写，表示了在 JavaScript 中书写 XML 格式的代码。它可以让我们在 React 中创建元素更加简单，并且保留 HTML 代码的结构更直观，提高开发效率。

注意：JSX 是 JavaScript 的语法扩展，无法在浏览器中直接使用，在 create-react-app 脚手架中内置了 @babel/plugin-transform-react-jsx 插件来解析它，成为 JavaScript 的标准语法。

JSX 语法规则

定义虚拟DOM时，不要写引号。
标签中混入JS表达式时要用{}。
类名指定不能用 class，要用 className。label 标签的 for 属性要写成 htmlFor
内联样式，要用style={{key:value}}的形式去写。
必须只能有一个根标签，可以使用 <> 幽灵标签，其实是简写
标签必须闭合，可以写单标签，例
标签首字母
- 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
- 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
如果 JSX 有换行，最好使用 () 包裹

JSX 使用

使用表达式

进行运算
三元运算
使用函数
使用 JSX
使用注释，格式{/* 注释*/}

<body>
  <div id="root">div>
  <script type="text/javascript" src="./js/react.development.js">script>
  <script type="text/javascript" src="./js/react-dom.development.js">script>
  <script type="text/javascript" src="./js/babel.min.js">script>
  <script type="text/babel">
    // 数据
    const data = {
      name: '孤城浪人',
      age: 18,
    };
    // 函数
    const ageAdd = () => {
      return ++data.age;
    };
    // jsx表达式
    const list = (
      <ul>
        <li>姓：{data.name.substring(0, 2)}</li>
        <li>名：{data.name.substring(2)}</li>
      </ul>
    );
    // 创建虚拟dom
    const Vdom = (
      <div>
        {/* 使用数据 */}
        <div>姓名：{data.name}</div>
        <div>年龄：{data.age}</div>
        {/* 使用三元 */}
        <div>是否成年：{data.age >= 18 ? '是' : '否'}</div>
        {/* 使用函数 */}
        <div>年龄加一：{ageAdd()}</div>
        {/* 使用JSX(jsx也是表达式) */}
        <div>{list}</div>
      </div>
    );
    // 渲染虚拟dom
    ReactDOM.render(Vdom, document.getElementById('root'));
  script>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

条件渲染

使用分支语句 if/else 完成条件渲染
使用三元运算符完成条件渲染
使用逻辑运算符完成条件渲染

<body>
  <div id="root">div>
  <script type="text/javascript" src="./js/react.development.js">script>
  <script type="text/javascript" src="./js/react-dom.development.js">script>
  <script type="text/javascript" src="./js/babel.min.js">script>
  <script type="text/babel">
    // 数据
    const data = {
      name: '孤城浪人',
      age: 18,
    };
    // 分支语句
    const getDom = () => {
      if (data.age >= 18) {
        return <span>是</span>;
      } else {
        return <span>否</span>;
      }
    }
    const Vdom1 = getDom();
    // 三元表达式
    const Vdom2 = <div>（三元表达式判断）是否成年：{data.age >= 18 ? <span>是</span> : <span>否</span>} </div>
    // 逻辑运算
    const Vdom3 = <div>（逻辑判断判断）是否成年：{data.age >= 18 && <span>是</span>}{data.age < 18 && <span>否</span>} </div>
    // 创建虚拟dom
    const Vdom = (
      <div>
        {/* 使用数据 */}
        <div>姓名：{data.name}</div>
        <div>年龄：{data.age}</div>
        <div> （分支语句）是否成年：{Vdom1}</div>
        {Vdom2}
        {Vdom3}
      </div>
    )
    // 渲染虚拟dom
    ReactDOM.render(Vdom, document.getElementById('root'));
  script>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

列表渲染

<body>
  <div id="root">div>
  <script type="text/javascript" src="./js/react.development.js">script>
  <script type="text/javascript" src="./js/react-dom.development.js">script>
  <script type="text/javascript" src="./js/babel.min.js">script>
  <script type="text/babel">
    // 数据
    const data = [{
      name: '孤城浪人',
      age: 18,
    }, {
      name: '孤城',
      age: 19,
    }, {
      name: '孤城',
      age: 20,
    }, {
      name: 'xxxx',
      age: 21,
    }];
    // 创建虚拟dom
    const Vdom = (
      <ul>
        {data.map((item) => (
          <li>
            <span>姓名：{item.name}</span><br />
            <span>年龄：{item.age}</span>
          </li>
        ))}
      </ul>
    )
    // 创建虚拟dom
    const Vdom1 = []
    data.map((item) => {
      Vdom1.push(
        <li>
          <span>姓名：{item.name}</span><br />
          <span>年龄：{item.age}</span>
        </li>
      )
    })
    // 渲染虚拟dom
    ReactDOM.render(<ul>{Vdom1}</ul>, document.getElementById('root'));
  script>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

style

style 接受一个采用小驼峰命名属性的 JavaScript 对象，而不是 CSS 字符串
React 会自动添加 ”px” 后缀到内联样式为数字的属性后，其他单位需要手动添加

<body>
  <div id="root">div>
  <script type="text/javascript" src="./js/react.development.js">script>
  <script type="text/javascript" src="./js/react-dom.development.js">script>
  <script type="text/javascript" src="./js/babel.min.js">script>
  <script type="text/babel">
    // 数据
    const data = {
      name: '孤城浪人',
      age: 18,
    };
    // // 函数
    const ageAdd = () => {
      return ++data.age;
    };
    const Vdom = (
      <div>
        {/*类名*/}
        <div className="name">姓名：{data.name}</div>
        {/*行内样式驼峰key值*/}
        <div style={{ backgroundColor: 'red' }}>年龄：{data.age}</div>
        {/*动态类名*/}
        <div className={data.age >= 18 ? 'old' : 'young'}>是否成年：{data.age >= 18 ? '是' : '否'}</div>
        {/*动态样式*/}
        <div style={{ color: data.age >= 18 ? 'aqua' : 'antiquewhite' }}>年龄加一：{ageAdd()}</div>
      </div>
    );
    // 渲染虚拟dom
    ReactDOM.render(Vdom, document.getElementById('root'));
  script>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

JSX 的使用基本就这些内容了，我是孤城浪人，一名正在前端路上摸爬滚打的菜鸟，欢迎你的关注。

相关阅读:
Allegro基本规则设置指导书之Spacing规则设置
 The O-one：开源语言模型计算机的革命
 【实验笔记】2022-10-29到2022-10-30的报错及解决方案记录
 QT菜单栏，工具栏，状态栏
 k8s核心组件
 数据分表Mybatis Plus动态表名最优方案的探索
 Vue3.0+小技巧
 C语言【隐式类型转换】和【显式类型转换】
一道北大强基题背后的故事（一）——从走弯路到看答案
 MySQL中SQL语句执行顺序分析
原文地址：https://blog.csdn.net/weixin_46015333/article/details/128157669