• React学习--- JSX的学习

    React学习— JSX

    1.概述

    ​ JSX 是 React 的核心组成部分，它使用 XML 标记的方式去直接声明界面，界面组件之 间可以互相嵌套。可以理解为在 JS 中编写与 XML 类似的语言,一种定义带属性树结构 （DOM 结构）的语法，它的目的不是要在浏览器或者引擎中实现，它的目的是通过各种 编译器将这些标记编译成标准的 JS 语言。

    ​ 虽然你可以完全不使用 JSX 语法，只使用 JS 语法，但还是推荐使用 JSX，可以定义 包含属性的树状结构的语法，类似 HTML 标签那样的使用，而且更便于代码的阅读。

    ​ 这就是 JSX ，他是 JavaScrip 的一种扩展语法。我们推荐在 React 中使用这种语法 来描述 UI 信息。JSX 可能会让你想起某种模板语言，但是它具有 JavaScrip 的全部能力。

    ​ 我们把这种东西称之为，react 元素，它可以很好的描述 UI 信息（dom 节点的组合）

    XML和HTML的区别：

    1. HTML标签语言语法松散，XML语法严格，区分大小写
    2. HTML主要是做页面传输，XML主要是做数据传输的
    3. HTML所有标签都是定义好的，XML所有标签都是自定义的

    2.JSX重构Hello world

    ReactDOM.render(
 <h1>欢迎进入 React 的世界</h1>,
 document.getElementById('root') // 渲染到哪里
)

    • 1
    • 2
    • 3
    • 4

    参数 1 这里就比较奇怪了，它并不是一个字符串，看起来像是纯 HTML 代码写在 JavaScript 代码里面。语法错误吗？这并不是合法的 JavaScript 代码, “在 JavaScript 写的标签的”语法叫 JSX- JavaScript XML。

    3.JSX语法中的js表达式

    1. 嵌入js表达式

      js 表达式必须通过 {表达式} 的方式才能嵌入到 jsx 语法中.

      <h1>欢迎进入 React 的世界 { 1+1 } </h1>

      • 1

    2. 属性绑定

      <h1 title={ a + 1 }>欢迎进入 React 的世界</h1>

      • 1

      class 的绑定用 className

      <h1 className={`big ${i==index?'active':''}`}>欢迎进入 React 的世界</h1>

      • 1

      style 的动态绑定

      <h1 style={{width:20,fontSize:20}} >user</h1>


      • 1
      • 2

      label 中使用 for 的时候，要改成 htmlfor

      <h1 htmlFor="xxx">欢迎进入 React 的世界</h1>

      • 1

    3. 数组渲染

      直接渲染

      const list = [
 <li key="1">sunyang</li>,
 <li key="2">lining</li>,
 <li key="3">chenhe</li>
]

      • 1
      • 2
      • 3
      • 4
      • 5

      数组成员可以是简单数据 number, string , 也可以是 dom 元素

      处理并渲染

      当数组成员是复合数据时,需要经过 forEach 或 map 方法处理后再渲染输出; map作用是将数据渲染成标签

      const list = [
 { name:'sunyang',age:10 },
 { name:'lining',age:20 },
 { name:'chenhe',age:30 }
];
<ul>
 {
 list.map(function (item) {
 return <li key={item.age}>{item.name}</li>
 })
 }
</ul>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12

    4. JSX语法中的注释

      写法一（不推荐）： { // 注释 // … }

      写法二（推荐，把多行写到单行中）： { /* 单行注释 */ }

      写法三（多行）： { /* * 多行注释 */ }

    注释在 babel 转换过程中会被忽略掉, 不会出现在最终的 js 代码中.

    1. JSX基本语法规则

      1. 必须有且只能有一个根节点
      2. 多标签写到包到一个小括号中，防止 JavaScript 自动分号不往后执行的问题。
      3. 遇到以 < 开头的 HTML 标签就用 HTML 规则解析
      4. 遇到以 { 开头代码块，就用 JavaScript 规则解析
      5. 单标签不能省略结束标签 , 必须结束 />
      6. JSX 允许直接在模板中插入 JavaScript 变量
      7. 如果这个变量是一个数组，则会展开这个数组的所有成员添加到模板中

    4.案例

    在这里插入图片描述

    在项目src文件夹中创建components文件交放组件

    在components文件夹下创建Input.jsx文件

    
//rcc 生成class形式的组件
//rsf 生成函数式的组件
import './Input.scss'
import React, { Component } from 'react';

class Input extends Component {
    render() {
        // 像class这样编译为js后会产生歧义的代码, 必须按照react规定的语法书写, 并且必须遵循小驼峰命名法
        return (
            <div className='input'>
                <input type="text" placeholder='输入商品名称' />
                <span>搜索</span>
            </div>
        );
    }
}

export default Input;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    在components文件夹下创建Input.scss文件

    .input{
    display: flex;
    margin: 10px;
    input{
        height: 40px;
        outline: none;
        padding-left: 20px;
        border: 1px solid #ccc;
        flex:1;
    }
    span{
        width: 80px;
        display: inline-block;
        text-align: center;
        height: 40px;
        line-height: 40px;
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    在components文件夹下创建List.jsx文件

    import React, { Component } from 'react';
//本地图片必须import导入, 才能使用
import logo from '../logo.svg'

import './List.scss'

class List extends Component {
    constructor(props){
        super(props);
        this.state = { //定义组件状态
            arr:[
                {name:'护肤',pic:logo},
                {name:'彩妆',pic:logo},
                {name:'香氛',pic:logo},
                {name:'进口酒',pic:logo},
                {name:'国产酒',pic:logo},
                {name:'精品奢货',pic:logo},
                {name:'食品百货',pic:logo},
                {name:'母婴专区',pic:logo},
                {name:'直播专区',pic:logo},
                {name:'特卖专场',pic:logo},
            ]
        }
    }
    render() {
        return (
            <div className='list'>
                {
                    // 列表渲染, 使用js中的map函数
                    this.state.arr.map((item)=>{
                        return (
                            <div className="cate">
                                <img src={item.pic} alt="" />
                                <div className="name"> {item.name} </div>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default List;

    • 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

    在components文件夹下创建List.scss文件

    .list{
    display: flex;
    flex-wrap: wrap;
    .cate{
        width: 20%;
        text-align: center;
        img{
            width: 80%;
            border-radius: 50%;
        }
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    在src文件夹中的App2.jsx文件

    import logo from './logo.svg';
import './App.css';
import React from 'react';
import Input from './components/Input'
import List from './components/List'

class App extends React.Component{
  constructor(props){ //在constructor中对组件状态进行初始化
    super(props);
    this.state = { //初始化组件状态
        
    }
  }

  render(){ //render是必须的, render中必须通过return返回 组件模板
    return (
      <div className="App">
          {/* 渲染Input组件 */}
          <Input />

          {/* 渲染List组件 */}
          <List />

      </div>
    )
  }
}
export default App;


    • 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

    在index.js文件中

    import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App2';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

tMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();


    • 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
  • 相关阅读:
    泰勒展开式
    python 为 网易云下载的 本地音乐文件增加 序号
    图书管理信息系统分析与设计
    罗丹明 PEG 巯基，Rhodamine PEG Thiol，荧光染料标记巯基/硫醇
    图书馆公众号自动预约python版
    双目立体视觉
    code blocks使用集
    AWS EKS 创建k8s生产环境实例
    Apache Knox 2.0.0使用
    Java基础篇--XML简介
  • 原文地址：https://blog.csdn.net/m0_53181852/article/details/127789256