首页 > 其他分享 >JSX反应语法-转载

JSX反应语法-转载

时间:2022-09-24 00:13:54浏览次数:63  
标签:React 转载 const 语法 createElement null JSX

JSX 语法详解
在之前的 react 基础文章中,创建元素使用的是 React.createElement() 方法,利用方法创建单层元素还算可以,可是如果出现嵌套结构,使用这种方法就会比较繁琐而且不直观,接下来咱们就讲讲 JSX 语法

1. 什么是 JSX
JSX即JavaScript XML。一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖,也是react.js的使用基础。React在不使用JSX的情况下一样可以工作,然而使用JSX可以提高组件的可读性,因此推荐使用JSX。这个是官网:http://facebook.github.io/jsx/

2. JSX 的基本使用
2.1 为什么使用 JSX
​ 原因一:使用 React.createElement() 创建元素比较繁琐,不简洁

​ 原因二:代码不简洁,无法一眼就看出结构层次

​ 例如:

    React.createElement(  'div', null,  
       React.createElement('h1', null, '购物列表'), 
       React.createElement('ul', null, 
          React.createElement('li', null, '华为'),  
          React.createElement('li', null, 'iPhone')
       )
   )
1
2
3
4
5
6
7
2.2 JSX 简介
JSX 是 JavaScript XML 的简写,表示 JavaScript 代码中写 XML(HTML)格式的代码
优势:声明式语法更加直观、与 HTML 结构相同,降低了学习成本、提升开发效率
JSX 是 react 的核心内容
利用 React.createElement() 方法创建元素
React.createElement(  'div', null,  
    React.createElement('h1', null, '购物列表'), 
    React.createElement('ul', null, React.createElement('li', null, '华为'),  React.createElement('li', null, 'iPhone'))
)
1
2
3
4
可以看出来这样的写法很不直观

JSX 语法
<div>
   <h1>购物列表</h1>
   <ul>
      <li>华为</li>
      <li>iPhone</li>
   </ul>
</div>
1
2
3
4
5
6
7
利用 JSX 语法,结构清晰,就是平时写的 HTML 标签

2.3 使用步骤
使用 JSX 语法创建react 元素

// JSX 语法
const el = (<h1>Hello JSX!</h1>)
1
2
使用 ReactDOM.render() 方法渲染 react 元素到页面中

// 渲染
ReactDOM.render(el, document.querySelector('#root'))
1
2
2.4 注意点
react 元素的属性名使用驼峰命名法:tabindex --> tabIndex
特殊属性名: class --> className 、for --> htmlFor
在 react 中所有的标签都必须闭合,无论是单标签还是双标签
推荐:使用小括号包裹 JSX 结构,从而避免 JS 中的自动插入分号陷阱
3. JSX 中使用 JavaScript 表达式
思考
JSX 语法是好用,但是这和写静态 HTML 标签好像没有区别
如何动态显示数据?实际应用一般都是从服务器获取数据,并将数据显示在页面中
猜想一下,既然 JSX 是直接写在 JS 中的,那 JS 当中的变量或函数应该可以在 JSX 中访问
const data = 'OPPO'
render() {
    return (
        <div>
           <h1>购物列表</h1>
           <ul>
              <li>华为</li>
              <li>iPhone</li>
              <li>{data}</li>
          </ul>
       </div>
    )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
3.1 嵌入 JS 表达式
语法:{JavaScript表达式}

const name = '小明'
const dv = (
   <div>你好,我叫:{name}</div>
)
1
2
3
4
注意点
单打括号中可以是任意的 JavaScript 表达式,如:三元表达式,加减乘除,数组,字符串
单大括号中不能出现语句(例如:if/for等)
JS 对象一般只会出现在style属性中
4. JSX 的条件渲染
思考
条件渲染:根据不同条件渲染不同的 JSX 结构
典型场景:Ajax 异步请求数据中的 loading 效果
结合之前的知识,猜想该如何实现
虽然在 JSX 中无法直接写 if/else 判断,但是可以嵌入函数表达式
在函数表达式中进行 if/else 判断
4.1 条件渲染实现
可以在函数表达式中使用 if/else 或者三元运算符来实现

const loadData = () => {
    if(idLoading) {
        return <div>数据加载中...</div>
    } else {
        return <div>数据加载完成</div>
    }
}

const load = (
    <div>
        {loadData()}
    </div>
)
1
2
3
4
5
6
7
8
9
10
11
12
13
5. JSX 的列表渲染
思考
实际开发中前端拿到的数据结构

const books = [
    {id: 1, name: 'React'},
    {id: 2, name: 'Vue'},
]
1
2
3
4
如何转化为下面的这种结构

const books = [
    <li>React</li>,
    <li>Vue</li>,
]
1
2
3
4
5.1 列表渲染实现
通过遍历数组的方法 map

Array.prototype.map()

const list = (
    <ul>
        {books.map(item => <li>{item.name}</li>)}
    </ul>
)
1
2
3
4
5
6. JSX 的样式处理
行内样式 - style

<h1 style={{ color: 'red', backgroundColor: 'skyblue' }}>  
    JSX的样式处理
</h1>
1
2
3
类名 - className

需要使用 import '样式文件路径/样式文件名称.css’导入样式文件 ,title类在xxx.css文件中定义好

<h1 className="title">  
    JSX的样式处理
</h1>
1
2
3
总结
JSX 是React 的核心内容
JSX 表示在JS代码中写HTML结构,是React声明式的体现
使用 JSX 配合嵌入的 JS 表达式、条件渲染、列表渲染,可以描述任意 UI 结构
推荐使用 className 的方式给JSX添加样式
————————————————
版权声明:本文为CSDN博主「新时代农民工Top」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/web00_11/article/details/121315226

 

标签:React,转载,const,语法,createElement,null,JSX
From: https://www.cnblogs.com/zaleswift/p/16724715.html

相关文章

  • Markdown语法笔记
    Markdown学习网站:https://commonmark.org/help/Markdown语法笔记Markdown目录(自动生成):[TOC]Markdown标题:#这是H1##这是H2###这是H3Markdown列表:-列表......
  • 计算机组成原理---转载
    作者:孟祥_成都链接:https://juejin.cn/post/6844904070751191047来源:稀土掘金著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。前端大比例的同学......
  • python注释语法与基本的数据类型
    python注释之语法1.注释可以理解为在我们在学习文言文的时候,碰到某一个词不会,课文会对这个词进行解释方便我们理解,在编程中为了方便别人或者我们自己以后在看我们程序......
  • pycharm,语法注释,部分PEP8规范,常量与变量的基本使用,几个数据类型
    pycharm下载与使用网址:https://www.jetbrains.com/pycharm/download/#section=windows1.该软件分为收费版和免费版免费版功能太少(community)我们尽量使用收费版(prof......
  • Docker--运行各种容器(转载自lxl)
    运行容器Nginxdockerrun-d\-p81:80\--namenginx81\-v/usr/local/nginx/html/hm-mall-portal:/usr/share/nginx/html\-v/usr/local/nginx/conf/nginx.conf:......
  • pycharm的安装与基础语法
    今日内容总结pycharm的安装与使用1.该软件分为收费版和免费版免费版功能太少(communit)所以我们尽量使用收费版(professinal)收费版有30天免费试用2.想要免费试用......
  • python的基础语法
    python的基础语法python语法之注释注释的最大作用是提高程序的可读性,在开发过程中非常有必要加上注释。Python支持两种类型的注释,分别是单行注释和多行注释。单行注......
  • python语法与基本数据类型
    python语法与基本数据类型python语法之注释什么是注释注释就是对一段代码的解释说明注释的编写注释的编写在python中有几种方式警号+空格后面跟解释说明#注释......
  • python学习之路Day03(pyhcarm基础配置/python基础语法/简单数据类型)
    今日内容概要pycharm基础设置PEP-8规范/python基础语法变量与常量定义基本数据类型(整形int,字符串str,浮点型float,字典dict,列表list)首先我们要学习Pycharm......
  • 【转载】SQL Server跨服务器操作数据库——通过链接服务器(LinkedServer)实现SQL Serv
     基础知识介绍以SQLServer的数据库管理工具SSMS(SQLServerManagementStudio)为平台进行操作。SQLServerManagementStudio(SSMS)是用于管理SQLServer基础结......