React文档(三)介绍JSX
我们先看看这个变量声明:
const element = <h1>Hello, world!</h1>;
这个有趣的标签语法既不是字符串也不是HTML。
这种写法叫做JSX,这是一种对js语法的扩展。我们建议使用这种语法和React配合去描述UI本来应该的样子。JSX也许会让你想到模板语言,但是它拥有js的强大支持是与生俱来的。
JSX生产React“元素”。我们会在下一章讲解将这些React元素渲染到DOM中。下面,你可以来看看JSX的基础知识来起步。
在JSX中嵌入表达式
function formatName(user) {
return user.firstName + ' ' + user.lastName;
} const user = {
firstName: 'Harper',
lastName: 'Perez'
}; const element = (
<h1>
Hello, {formatName(user)}!
</h1>
); ReactDOM.render(
element,
document.getElementById('root')
);
我们把JSX代码分割成多行,这样可读性好。即使不需要,但当这样做地时候,我们同样建议将它包裹在圆括号里避免意想不到的错误。
JSX也是一种表达式
JSX表达式在编译之后会变成规则的js对象。
这表示你可以将JSX放在if条件语句中或者for循环中,把它们赋值给变量,将他们作为函数的参数,也可以在函数中作为返回值:
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
在JSX中指定属性
有时你会使用引用(就是引号)来指定字符串字面量作为属性:
const element = <div tabIndex="0"></div>;
也许你也会使用花括号来嵌入一个js表达式到属性中:
const element = <img src={user.avatarUrl}></img>;
当你在属性里嵌入js表达式的时候不要使用引用(引号)。否则JSX会把属性值当做一个字符串字面量而不是js表达式。你要么使用引用(引号,为字符串值)要么就用花括号(为js表达式),但是不要同时使用。
在JSX中指定子元素
如果是一个空标签,你会以一个/>来结尾,就像xml:
const element = <img src={user.avatarUrl} />;
JSX标签也可以包含子元素:
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
警告:
JSX更接近于js而不是HTML,所以React DOM使用驼峰属性命名规则来取代原来的HTML属性名。
举个例子,class变成了className,tabindex变成了tabIndex。
JSX防止注入攻击
在JSX中嵌入用户输入是很安全的:
const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;
默认情况下,React DOM会在渲染之前避免任何嵌入JSX的值。因此这样能够保证没有人能够将不明确的东西注入你的程序。所有输入都会在渲染之前被转换成字符串。这样能够防止XSS攻击。
JSX表现为对象
Babel会把JSX转换成一个React.createElement()调用。
下面两个例子是相似的:
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
React.createElement()会执行好几次检查帮助你减少bug而且更重要的它会创建一个这样的对象:
// Note: this structure is simplified
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
};
这些对象叫做“React元素”。你可以把它看成是你在屏幕上看到的东西的描述。React会读取这些对象然后使用它们构建DOM并且保持更新。
我们在下一章节研究渲染React元素到DOM。
提示:
建议搜索“Babel”语法格式用于你的编辑器,这样可以高亮显示ES6和JSX的代码。
React文档(三)介绍JSX的更多相关文章
- C# 写入XML文档三种方法详细介绍
三个类将同样的xml内容写入文档,介绍了如何使用XmlDocument类对XML进行操作,以及如何使用LINQ to XML对XML进行操作. 它们分别使用了XmlDocument类和XDocum ...
- React文档(十三)思考React
在我们的看来,React是使用js创建大型快速网站应用的首要方法.它在Facebook和Instagram的使用已经为我们展现了它自己. React的一个很好的地方就在于当你创建应用的时候它使你思考如 ...
- Poi之Word文档结构介绍
1.poi之word文档结构介绍之正文段落 一个文档包含多个段落,一个段落包含多个Runs,一个Runs包含多个Run,Run是文档的最小单元 获取所有段落:List<XWPFParagraph ...
- Tsung MQTT协议简介及MQTT xml文档配置介绍
MQTT协议简介及MQTT xml文档配置介绍 by:授客 QQ:1033553122 1. MQTT协议介绍 MQTT(Message Queuing Telemetry Transport,消息队 ...
- ElasticSearch文档操作介绍三
ElasticSearch文档的操作 文档存储位置的计算公式: shard = hash(routing) % number_of_primary_shards 上面公式中,routing 是一个可变 ...
- dom4j解析xml文档全面介绍
一.dom4j介绍 dom4j是一个Java的XML API,类似于jdom,用来读写XML文件的.dom4j是一个非常非常优秀的Java XML API,具有性能优异.功能强大和极端易用使用的特点, ...
- React文档(一)安装
React是一个灵活的可以用于各种不同项目的框架,你可以用它来写新应用,你也可以逐步将它引进已有的代码库而不用重写整个项目. 试用React 如果你想玩一玩React,那么就去CodePen上试一试. ...
- IEEE829-2008软件测试文档标准介绍
1998版中定义了一套文档用于8个已定义的软件测试阶段: 测试计划: 一个管理计划的文档 包括: 测试如何完成 (包括SUT的配置). 谁来做测试 将要测试什么 测试将持续多久 (虽然 ...
- React文档(二十四)高阶组件
高阶组件(HOC)是React里的高级技术为了应对重用组件的逻辑.HOCs本质上不是React API的一部分.它是从React的组合性质中显露出来的模式. 具体来说,一个高阶组件就是一个获取一个组件 ...
- react文档demo实现输入展示搜索结果列表
文档页面地址:https://doc.react-china.org/docs/thinking-in-react.html 该文档只给了具体实现思路,下面是我实现的代码. 初学react,如果有写的 ...
随机推荐
- 论文笔记之 SST: Single-Stream Temporal Action Proposals
SST: Single-Stream Temporal Action Proposals 2017-06-11 14:28:00 本文提出一种 时间维度上的 proposal 方法,进行行为的识别.本 ...
- PredNet --- Deep Predictive coding networks for video prediction and unsupervised learning --- 论文笔记
PredNet --- Deep Predictive coding networks for video prediction and unsupervised learning ICLR 20 ...
- arm中断体系结构
ARM处理器中有7种类型的异常,按优先级从高到低的排列如下: 复位异常(Reset). 数据异常(Data Abort). 快速中断异常(FIQ) ...
- Win10下Java开发环境配置
首先下载符合操作系统版本的jdk,比如64位的JDK8: 下载链接:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-down ...
- codeforce 886C Petya and Catacombs (map,思路)
突然发现百度不到这题的单独题解(果然是因为这是水题么),那我就来写一个了~ 先把题给贴了. C. Petya and Catacombs time limit per test 1 second me ...
- printf和std::cout ...endl
printf效率要比std::cout...endl高些,可以减少打印所花时间
- Terminal run py文件
cd Documents cd PythonCode python3 hello.py Text Editor: Atom Atom 可以用来写 python 脚本 (文件后缀名 .py). 但是不用 ...
- openlayer ol.js和ol-debug.js的使用 调试技巧
二者实现的功能是一样的,有以下区别 : ol.js一般打包项目的时候使用, ol-debug.js编写代码调试的时候使用. 下边是用ol-debug.js编写代码调试的显示: 编写代码调试的技巧,所有 ...
- Python 爬取 猫眼 top100 电影例子
一个Python 爬取猫眼top100的小栗子 import json import requests import re from multiprocessing import Pool #//进程 ...
- 设计模式(六)Prototype Pattern 原型模式
通过new产生一个对象非常繁琐,可以使用原型模式 原型模式实现: ——Cloneable接口和clone方法 ——Prototype模式实现起来最困难的地方是实现内存的复制和操作,Java中提供了cl ...