1.Introducing JSX(JSX简介)

React版本:15.4.2
**翻译:xiyoki **

考虑这个变量声明:
const element =

Hello, world!

;
这个有趣的标签语法既不是字符串也不是HTML。
它被称为JSX,它是Javascript的语法扩展。我们建议使用它与React来描述UI应该是什么样子。JSX可能唤起你对模板语言的记忆,但JSX伴随着Javascript的全部力量。
JSX生成React elements。我们将在下一节中探讨将它们渲染到DOM。

Embedding Expressions in JSX(在JSX中嵌入表达式)

你可以将任何Javascript变量或表达式包裹在花括号中以嵌入到JSX中。
例如2+2,``user.nameformatName(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') );

我们将JSX拆分为多行以提高可读性。虽然不是必需的,但当执行此操作时,我们还建议将其括在括号中,以避免自动分号插入的陷阱。

JSX is an Expression Too(JSX也是一个表达式)

编译后,JSX表达式成为常规Javascript对象。
这意味着你可以在if语句和for循环中使用JSX,将它分配给变量,接受它作为参数,并从函数返回它:

function getGreeting(user) {
  if (user) {
    return 

Hello, {formatName(user)}!

; } return

Hello, Stranger.

; }

Specifying Attributes with JSX(使用JSX指定属性)

你可以使用引号将字符串文字指定为属性:

const element = 
;

你可以使用花括号将Javascript表达式嵌入属性:

const element = ;

在属性中嵌入Javascript表达式时,不要在大括号周围加引号。否则JSX会将该属性视为字符串文字而不是表达式。你应该使用引号(对于字符串值)或花括号(对于表达式),但二者不能在同一属性中。

Specifying Children with JSX(使用JSX指定子项)

如果标记为空,你应当用 /> 立即关闭它,如XML:

const element = ; 

JSX标签可能包含子元素:

const element = (
  

Hello!

Good to see you here.

);

** 警告: **
由于JSX比HTML更接近Javascript,React DOM使用camelCase属性命名约定而不是HTML属性名称。

例如,在JSX中,class成为className,tabindex成为tabIndex。

JSX Prevents Injection Attacks(JSX防止注入攻击)

在JSX中嵌入用户输入时安全的:

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = 

{title}

;

默认情况下,React DOM在渲染它们之前转义嵌入在JSX中的任何值。因此,它确保你不能注入任何没有明确写在你应用程序中的数据。在渲染之前,一切都转换为字符串。这有助于防止XSS(跨站点)攻击。

JSX Represents Objects(JSX表示对象)

Babel将JSX编译到React.createElement()的调用中。
这两个例子是相同的:

const element = (
  

Hello, world!

); const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );

React.createElement()执行一些检查,以帮助你编写无错误的代码,但本质上它创建一个像这样的对象:

// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

这些对象被称为‘React元素’。你可以把他们想象成你想在屏幕上看到的内容。React读取这些对象,并使用它们构造DOM,并保持其为最新。
我们将在下一节中探索渲染React元素到DOM。

Tip:
我们建议为你选择的编辑器搜索Babel语法方案,以便正确突出显示ES6和JSX代码。
附:babel-sublime安装

你可能感兴趣的:(1.Introducing JSX(JSX简介))