React文档翻译系列（三）JSX简介

wean 发布于2019-08-20 15:28 / 2945人阅读

摘要：文档翻译系列三简介先来看一下下面的变量声明这种有趣的标签语法既不是字符串也不是。这种形式被称作，他是的一种扩展语法。为便于阅读，我们将分隔成多行。表示对象将编译成调用。我们建议您为选择的编辑器搜索语法方案，以便和代码都能够被正确高亮的显示。

React文档翻译系列（三）JSX简介

先来看一下下面的变量声明：

const element = Hello world!

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

这种形式被称作JSX，他是Javascript的一种扩展语法。我们推荐在React中使用这种形式来描述UI该是什么样子的。JSX可能会让你想起某种模板语言，但是它具有Javascript的全部功能。

JSX会生产出React“元素”。我们将在下一部分来探索如何将它渲染到DOM上。接下来，您可以找到JSX的基础知识，以帮助您开始使用。

JSX中嵌入表达式

您可以在JSX中，通过一对大括号嵌入任何的Javascript表达式。

比如2+2,user.firstName,和formatName(user)，这些都是可用的表达式。

function formatName(user) {
  return user.firstName + " " + user.lastName;
}

const user = {
  firstName: "Harper",
  lastName: "Perez"
};

const element = (
  
    Hello, {formatName(user)}!
  
);

ReactDOM.render(
  element,
  document.getElementById("root")
);

在CodePen中尝试。

为便于阅读，我们将JSX分隔成多行。我们推荐使用括号将JSX包裹起来，尽管这不是必须的，因为这样可以避免分号自动插入的陷阱。

JSX也是一种表达式

编译之后，JSX表达式就变成了常规的Javascript对象。

这意味着你可以在if语句或者是for循环中使用JSX，用它给变量赋值，当做参数接收它，或者作为函数的返回值。

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

用JSX指定属性

您可以使用引号来指定字符串作为属性：

const element = 
;

您也可以在一个属性中通过花括号嵌入一个Javascript表达式：

const element = 关闭它：
const element = ;
JSX标签可能包含子元素：
const element = (
  
    Hello!
    Good to see you here.
  
);
警告
 由于JSX相对HTML来说更接近于Javascript，所以React DOM使用驼峰方式为属性命名来取代HTML的属性名。
例如，在JSX中，class变成了className，tabindex变成了tabIndex。
JSX防止了注入式攻击
在JSX中，嵌入用户输入是安全的：
const title = response.potentiallyMaliciousInput;
// This is safe:
const element = {title}
;
默认的，React DOM在渲染通过JSX嵌入的任何内容之前，都会将他们的值进行转义。这样就确保了除非在你的应用中明确的写出来的内容，绝对不会注入其他任何内容。
在被渲染之前，所有的东西都被转义成为了字符串，这样就能帮助您防止XSS（cross-site-scripting）攻击。
JSX表示对象
Babel将JSX编译成React.createElement()调用。
下面的两个例子是相同的：
const element = (
  
    Hello, world!
  
);
const element = React.createElement(
  "h1",
  {className: "greeting"},
  "Hello, world!"
);
React.createElement()会执行一些检查来帮助你写出没有bug的代码，但是它创建对象的原理是像下面这样：
// Note: 这是简化的结构
const element = {
  type: "h1",
  props: {
    className: "greeting",
    children: "Hello, world"
  }
};
这些对象被称作“React元素”。你可以把他们想象成为你想在屏幕上看到的东西的一种描述。React会读取这些对象，用他们来构建DOM，并且保持它们的不断更新。
我们将在下一部分来探索如何将React元素渲染到DOM上。
Tips
我们建议您为选择的编辑器搜索“Babel”语法方案，以便ES6和JSX代码都能够被正确高亮的显   示。

云服务器 GPU云服务器 jsx文档系列三云机三厂简介 React Hooks 文档重大更新！

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82278.html

React文档翻译系列（一）安装

摘要：文档翻译系列一安装原文地址原文本系列是针对文档进行的翻译，因为自己在学习的时候，最开始通过看博客或者论坛等中文资料，有些内容是零零散散的接收，并没有给自己带来很好的效果，所以后来决定把文档的原文从头到尾看一遍。 React文档翻译系列（一）安装原文地址：原文本系列是针对React文档进行的翻译，因为自己在学习react的时候，最开始通过看博客或者论坛等中文资料，有些内容是零零散散的...

Fourierr 2019-08-20 15:28 评论0 收藏0
前端系列——React开发必不可少的eslint配置

摘要：项目需要安装的插件配置详情下面的配置涵盖了开发者所需要的绝大部分信息，中的值分别表示不开启检查警告错误。配置文件类型配置文件类型不只有和，其实包括下面这些项目需要安装的插件 babel-eslint: ^8.0.3, eslint: ^4.13.1, eslint-plugin-react: ^7.5.1, 配置详情下面的配置涵盖了开发者所需要的绝大部分信息，rules中的值0、1...

keithxiaoy 2019-08-26 11:33 评论0 收藏0
【全栈React】第2天: 什么是 JSX?

摘要：代表基本上是常规。第次更新，在年完成。几乎完全支持所有主要的浏览器。但这将是一段时间，直到较旧版本的浏览器逐步停止使用。这意味着将转换为。在组件的情况下，写入的将如下所示在我们在第一个作出反应组件使用的语法是语法。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3797原文：https://www.fullstackreact....

Eirunye 2019-08-20 18:29 评论0 收藏0
React系列 --- Jsx, 合成事件与Refs(二)

摘要：系列系列简单模拟语法一系列合成事件与二系列算法实现分析三系列从到再到四系列与部分源码解析五系列从使用了解的各种使用方案六的诞生他是的一种扩展语法。这个函数接受组件的实例或元素作为参数，以存储它们并使它们能被其他地方访问。 React系列 React系列 --- 简单模拟语法(一)React系列 --- Jsx, 合成事件与Refs(二)React系列 --- virtualdom di...

LiuZh 2019-08-26 10:37 评论0 收藏0