专栏首页JavaEdgeReact.js 实战之 JSX 简介在 JSX 中使用表达式JSX 本身其实也是一种表达式JSX 属性JSX 嵌套JSX 防注入攻击JSX 代表 ObjectsJSX 的怪异之处

React.js 实战之 JSX 简介在 JSX 中使用表达式JSX 本身其实也是一种表达式JSX 属性JSX 嵌套JSX 防注入攻击JSX 代表 ObjectsJSX 的怪异之处

在项目中引入并使用 JSX

添加支持

插件支持

引入依赖

React提供的环境搭建工具演示

新建test项目

yarn start

可以将配置文件提出来

yarn eject

配置文件可读性差,因此不考虑使用这种现成方式写项目,跳过吧

我们来观察一下声明的这个变量:

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

这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML 它被称为 JSX, 一种 JavaScript 的语法扩展 推荐在 React 中使用 JSX 来描述用户界面 JSX 乍看起来可能比较像是模版语言,但事实上它完全是在 JavaScript 内部实现的

JSX 用来声明 React 当中的元素。在下节会详细介绍元素是如何被渲染出来的

先来看看 JSX 的基本使用方法

在 JSX 中使用表达式

可任意地在 JSX 当中使用 JavaScript 表达式,在 JSX 当中的表达式要包含在大括号里

例如 2 + 2user.firstName, 以及 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')
);

书写 JSX 的时候一般都会带上换行和缩进,这样可以增强代码的可读性 同样推荐在 JSX 代码的外面扩上一个小括号,这样可以防止 分号自动插入 的 bug

JSX 本身其实也是一种表达式

在编译后,JSX 其实会被转化为普通的 JavaScript 对象

这意味着,你其实可以在 if 或者 for 语句里使用 JSX,将它赋值给变量,当作参数传入,作为返回值都可以

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

JSX 属性

使用引号来定义以字符串为值的属性

const element = <div tabIndex="0"></div>;

使用大括号来定义以 JavaScript 表达式为值的属性

const element = <img src={user.avatarUrl}></img>;

切记你使用了大括号包裹的 JavaScript 表达式时就不要再到外面套引号了 JSX 会将引号当中的内容识别为字符串而不是表达式

JSX 嵌套

若 JSX 标签是闭合式的,需在结尾处用/>, 就好像 XML/HTML 一样

JSX 标签同样可以相互嵌套

警告: 因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase 小驼峰命名 来定义属性的名称,而不是使用 HTML 的属性名称 如 class 变成了 classNametabindex 则对应着 tabIndex

JSX 防注入攻击

可放心在 JSX 当中使用用户输入

React DOM 在渲染之前默认会 过滤 所有传入的值 它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本) 攻击

JSX 代表 Objects

Babel 转译器会把 JSX 转换成一个名为 React.createElement()的方法调用

下面两种代码的作用是完全相同的

React.createElement()首先会进行一些避免bug的检查,之后会返回一个类似下面例子的对象

这样的对象被称为 “React 元素”。它代表所有你在屏幕上看到的东西。React 通过读取这些对象来构建 DOM 并保持数据内容一致。

我们将在下一个章节当中介绍更多有关 React 元素 是如何渲染成 DOM 的内容。

Tip: 如果你是在使用本地编辑器编写 JSX 代码的话,推荐你去装一个支持 JSX 高亮的插件,这样更方便之后的开发学习。

JSX 的怪异之处

JSX 偶尔也比较奇怪。针对在使用JSX 构建组件时可能会遇到的常见问题,本节汇总了一些小技巧、提示和策略来供你应对。

  • 单一根节点 React 组件只能渲染一个根节点。想要了解这个限制的原因,我们先来看看render函数的一个返回示例:
return(  
    <h1>Hello World</h1> 
) 

它会被转换成一条语句:

return React.createElement("h1",null,"Hello World");

但是,下面的代码却不是合法的:

return (  
<h1>Hello World</h1> 
<h2>Have a nice day</h2> 
) 

需要明确的是,这并非JSX 的限制,而是JavaScript 的一个特性:一条返回语句只能返回单个值,而在前面的代码中我们尝试返回两条语句(两次React.createElement 调用)。解决的方法非常简单:就像你在普通JavaScript 中会做的那样,将所有返回值包含到一个根对象中。

return (  
<div> 
<h1>Hello World</h1> 
<h2>Have a nice day</h2> 
</div> 
) 

它完全有效,因为它会被转换成:

return React.createElement("div",null,  
React.createElement("h1",null,"Hello World"),  
React.createElement("h2",null," Have a nice day"),  
) 

它返回单个值,并且是通过合法的JavaScript 完成的。

  • 条件语句 如果语句不兼容于JSX,看上去像是JSX 的限制所致,实际上却是因为JSX 只是普通的JavaScript 回顾一下JSX 是如何被转换为普通JavaScript 如下JSX
return (  
      <div className="salutation">Hello JSX</div> 
) 

会被转换成这样的JavaScript

return (  
    React.createElement("div",{className:"salutation"},"Hello JSX");  
) 

然而,如果尝试在JSX 的中间编写if 语句,例如: <div className={if (condition) { "salutation" }}>Hello JSX</div>

它就会被转换成一个非法的JavaScript 表达式,如图2-1 所示:

image

  • 有什么解决方法? 尽管并无可能在JSX 中使用“if”语句,但仍有根据条件渲染内容的方法,包括使用三元表达式和将条件赋值给一个变量(空值和未定义的值都会被React 进行处理,JSX在转义时什么都不会输出)。

使用三元表达式

如果你有一个非常简单的表达式,可以使用三元形式:

render() {  
  return (  
    <div className={condition ? "salutation" : ""}> 
      Hello JSX  
    </div> 
  )  
} 

这段代码会被转换成一段合法的JavaScript:

React.createElement("div",{className: condition ?"salutation" : ""},  
"Hello JSX"); 

三元形式还可用来有条件地渲染整个节点:

<div> 
{condition ?  
<span>Hello JSX</span> 
: null}  
</div> 

将条件外置

如果三元表达式还不能应付你的要求,解决方法是不要在JSX 的中间使用条件。简单地将条件语句移动到外部(就像你在第2 章中隐藏和显示ContactItem 细节时所采取的方法)。

下面是原先的代码:

1.  render() {  
2.  return (  
3.  <div className={if (condition) { "salutation" }}> 
4.  Hello JSX  
5.  </div> 
6.  )  
7.  } 

将条件移动到JSX 的外部,就像:

render() {  
let className;  
if(condition){  
className = "salutation";  
}  
return (  
<div className={className}>Hello JSX</div> 
)  
} 

React 知道如何处理未定义的值,如果条件为假,它甚至不会在div 标签中创建class特性。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 深入了解React.js的JSX1 JSX 与HTML2 JSX 和HTML 的不同之处

    JavaEdge
  • DDD领域驱动设计实战(三)- 理解实体

    传统开发人员总将关注点放在数据,而不是领域。因为在软件开发中,DB占据主导地位。首先考虑的是数据的属性(即数据库的列)和关联关系(外键关联),而不是富有行为的领...

    JavaEdge
  • Redis实践之复制的原理与优化

    JavaEdge
  • React基础篇 - 02.JSX 简介

    JSX 简介 请观察下面的变量声明: const element = <h1>Hello, world!</h1>; 这种看起来可能有些奇怪的标签语法既不是字符...

    静默虚空
  • 【译】JSX 如何生成 HTML 元素?

    JSX 使 我们更容易编写 React 组件。 有些人可能会发现 JSX 具有很陡峭的学习曲线,这是完全可以理解的。 它不完全是 HTML,也不完全是 Java...

    腾讯IVWEB团队
  • JSX_TypeScript笔记17

    TypeScript 也支持JSX,除了能够像Babel一样把 JSX 编译成 JavaScript 外,还提供了类型检查

    ayqy贾杰
  • 深入了解React.js的JSX1 JSX 与HTML2 JSX 和HTML 的不同之处

    JavaEdge
  • 前端开发面试题总结之——CSS3

    ---- 相关知识点 布局、 浮动、 盒子模型、 弹性和模型、 选择器优先级、 居中定位、 兼容性、 hack写法...... 题目&答案 如何理解CSS的盒子...

    用户1667431
  • 一段自定义显示问候语代码

    自定义问候语和背景色,代码来自某站扒的,代码由css加html而成,代码直接复制下面的来用,也可以把css分开问候语如果你喜欢可以不改,记录一下怕自己手贱又删掉...

    陌涛
  • CSS基础

    CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 1 2 3 4 5 6 7 8 9 ''' ...

    用户1214487

扫码关注云+社区

领取腾讯云代金券