ReactJs 第二章 JSX

JSX是书写在jsx文件中的看似JavaScript语法但又包含Html标签的一种新的写法。jsx为Javascript的一种扩展语法,tsx则为TypeScript 的扩展语言。其书写看起来有JS也有Xml标签。JSX是ReactApp组成的最小单元元素，React使用Bable编译器将Jsx转换为js对象，提供给React进行页面渲染。

1，JSX之{大括号}表达式在标签内的使用

在JSX中可以使用大括号来进行嵌入需要替换的部分，可以替换之前定义的变量、函数表达式等表达式,如:

import React from 'react';
import ReactDOM from 'react-dom';const name = "zhang san";
const person ={name:"li si",age:18
}
var newPersonName = function(){return "wang wu";
}const element = <h1>Hello {name} , {person.name} And {newPersonName()}</h1>;ReactDOM.render(element,document.getElementById('root'));

运行结果

在ReactDOM.render函数中第一部分中的jsx也可以使用函数进行jsx对象返回。

var getJsxObj = function(){return <h3>这是JSXObj</h3>;
}ReactDOM.render(getJsxObj(),document.getElementById('root'));

2，JSX之{大括号}表达式在标签上以属性的方式使用

const element = <img src={url} title={"这是标题"}></img>;

在写style时 style值需要用js对象来解析，所以在有style属性时写法如下：

const divEle = <div style={{border:"2px solid red"}}>{element}</div>;

3，使用大括号还可以进行对危险标签进行转义操作

const script = "<script>alert(999);</script>";ReactDOM.render(script,document.getElementById('root'));

4,JSX多层级嵌套

import React from 'react';
import ReactDOM from 'react-dom';const url = "https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top-e3b63a0b1b.png";const element = <img src={url} title={"这是标题"}></img>;
const divEle = <div style={{border:"2px solid red"}}>{element}</div>;ReactDOM.render(divEle,document.getElementById('root'));

5，Bable 转义过程：

const element = (<h1 className="greeting">Hello, world!</h1>
);
//等效转义后的：
const element = React.createElement('h1',{className: 'greeting'},'Hello, world!'
);
//简化后的结构：
const element = {type: 'h1',props: {className: 'greeting',children: 'Hello, world!'}
};

ReactJs 第二章 JSX相关推荐

王道考研计算机网络笔记第二章：物理层
本文基于2019 王道考研计算机网络: 2019 王道考研计算机网络个人笔记总结第一章:王道考研计算机网络笔记第一章:概述&计算机网络体系结构后续章节将陆续更新- 第二章一.物 ...
计算机组成原理-第二章数据表示与运算
计算机组成原理-第二章数据表示与运算一.数据的表示 1.数值型数据的表示(重点难点) 1.1数值型数据的表示--进位制 1.2数值型数据表示-码制 1.3数值型数据的表示--定点数 1.4数值型数 ...
2021-08-08概率论与数理统计-第二章
文章目录概率论与数理统计-第二章概率论与数理统计-第二章
软件构造第二章第一节软件生命周期和版本控制
软件构造第二章第一节软件生命周期和版本控制基本内容 Software Development Lifecycle (SDLC) Traditional software process mode ...
第二节认识计算机教案,第二章第二节局域网的构建教学设计_博客
<第二章第二节局域网的构建教学设计_博客>由会员分享,可在线阅读,更多相关<第二章第二节局域网的构建教学设计_博客(3页珍藏版)>请在装配图网上搜索. 1.第二章 ...
ArcGIS for Desktop入门教程_第二章_Desktop简介 - ArcGIS知乎-新一代ArcGIS问答社区
原文:ArcGIS for Desktop入门教程_第二章_Desktop简介 - ArcGIS知乎-新一代ArcGIS问答社区 1 Desktop简介 1.1 ArcGIS for Desktop ...
第二章序列比对——Needleman-Wunsch全局比对
[生信]第二章序列比对--Needleman-Wunsch全局比对主要为基因组测序比对相关知识,部分内容作笔记自查使用.如有错误或遗漏还请海涵,可评论或邮箱联系. 最后修改时间:2020-04-0 ...
第二章序列比对——Blast局部比对
第二章序列比对--Blast局部比对阅读量: 330 主要为基因组测序比对相关知识,部分内容作笔记自查使用.如有错误或遗漏还请海涵,可评论或邮箱联系. 最后修改时间:2020-04-16 16: ...
Learning Perl学习笔记（1）第二章Scalar Data
If Control Structure(IF循环) 脚本如下: #!/usr/bin/perl use warnings; use strict; use v5.24; my $line = < ...

ReactJs 第二章 JSX

ReactJs 第二章 JSX相关推荐

最新文章

热门文章