我们先看看这个变量声明:

const element = <h1>Hello, world!</h1>;

这个有趣的标签语法既不是字符串也不是HTML。

这种写法叫做JSX,这是一种对js语法的扩展。我们建议使用这种语法和React配合去描述UI本来应该的样子。JSX也许会让你想到模板语言,但是它拥有js的强大支持是与生俱来的。

JSX生产React“元素”。我们会在下一章讲解将这些React元素渲染到DOM中。下面,你可以来看看JSX的基础知识来起步。

在JSX中嵌入表达式

你可以在JSX中嵌入任何使用大括号包裹起来的js表达式。
举个例子,2+2,user.name还有formatName(user)都是有效的表达式:
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')
);

在CodePen里试一试

我们把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的更多相关文章

  1. C# 写入XML文档三种方法详细介绍

      三个类将同样的xml内容写入文档,介绍了如何使用XmlDocument类对XML进行操作,以及如何使用LINQ to XML对XML进行操作. 它们分别使用了XmlDocument类和XDocum ...

  2. React文档(十三)思考React

    在我们的看来,React是使用js创建大型快速网站应用的首要方法.它在Facebook和Instagram的使用已经为我们展现了它自己. React的一个很好的地方就在于当你创建应用的时候它使你思考如 ...

  3. Poi之Word文档结构介绍

    1.poi之word文档结构介绍之正文段落 一个文档包含多个段落,一个段落包含多个Runs,一个Runs包含多个Run,Run是文档的最小单元 获取所有段落:List<XWPFParagraph ...

  4. Tsung MQTT协议简介及MQTT xml文档配置介绍

    MQTT协议简介及MQTT xml文档配置介绍 by:授客 QQ:1033553122 1. MQTT协议介绍 MQTT(Message Queuing Telemetry Transport,消息队 ...

  5. ElasticSearch文档操作介绍三

    ElasticSearch文档的操作 文档存储位置的计算公式: shard = hash(routing) % number_of_primary_shards 上面公式中,routing 是一个可变 ...

  6. dom4j解析xml文档全面介绍

    一.dom4j介绍 dom4j是一个Java的XML API,类似于jdom,用来读写XML文件的.dom4j是一个非常非常优秀的Java XML API,具有性能优异.功能强大和极端易用使用的特点, ...

  7. React文档(一)安装

    React是一个灵活的可以用于各种不同项目的框架,你可以用它来写新应用,你也可以逐步将它引进已有的代码库而不用重写整个项目. 试用React 如果你想玩一玩React,那么就去CodePen上试一试. ...

  8. IEEE829-2008软件测试文档标准介绍

    1998版中定义了一套文档用于8个已定义的软件测试阶段: 测试计划: 一个管理计划的文档 包括:   测试如何完成 (包括SUT的配置).   谁来做测试   将要测试什么   测试将持续多久 (虽然 ...

  9. React文档(二十四)高阶组件

    高阶组件(HOC)是React里的高级技术为了应对重用组件的逻辑.HOCs本质上不是React API的一部分.它是从React的组合性质中显露出来的模式. 具体来说,一个高阶组件就是一个获取一个组件 ...

  10. react文档demo实现输入展示搜索结果列表

    文档页面地址:https://doc.react-china.org/docs/thinking-in-react.html 该文档只给了具体实现思路,下面是我实现的代码. 初学react,如果有写的 ...

随机推荐

  1. 论文笔记之 SST: Single-Stream Temporal Action Proposals

    SST: Single-Stream Temporal Action Proposals 2017-06-11 14:28:00 本文提出一种 时间维度上的 proposal 方法,进行行为的识别.本 ...

  2. PredNet --- Deep Predictive coding networks for video prediction and unsupervised learning --- 论文笔记

    PredNet --- Deep Predictive coding networks for video prediction and unsupervised learning   ICLR 20 ...

  3. arm中断体系结构

     ARM处理器中有7种类型的异常,按优先级从高到低的排列如下:                   复位异常(Reset).     数据异常(Data Abort).     快速中断异常(FIQ) ...

  4. Win10下Java开发环境配置

    首先下载符合操作系统版本的jdk,比如64位的JDK8: 下载链接:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-down ...

  5. codeforce 886C Petya and Catacombs (map,思路)

    突然发现百度不到这题的单独题解(果然是因为这是水题么),那我就来写一个了~ 先把题给贴了. C. Petya and Catacombs time limit per test 1 second me ...

  6. printf和std::cout ...endl

    printf效率要比std::cout...endl高些,可以减少打印所花时间

  7. Terminal run py文件

    cd Documents cd PythonCode python3 hello.py Text Editor: Atom Atom 可以用来写 python 脚本 (文件后缀名 .py). 但是不用 ...

  8. openlayer ol.js和ol-debug.js的使用 调试技巧

    二者实现的功能是一样的,有以下区别 : ol.js一般打包项目的时候使用, ol-debug.js编写代码调试的时候使用. 下边是用ol-debug.js编写代码调试的显示: 编写代码调试的技巧,所有 ...

  9. Python 爬取 猫眼 top100 电影例子

    一个Python 爬取猫眼top100的小栗子 import json import requests import re from multiprocessing import Pool #//进程 ...

  10. 设计模式(六)Prototype Pattern 原型模式

    通过new产生一个对象非常繁琐,可以使用原型模式 原型模式实现: ——Cloneable接口和clone方法 ——Prototype模式实现起来最困难的地方是实现内存的复制和操作,Java中提供了cl ...