【譯】介紹JSX

Blet發表於2016-07-12
JS

下面是react官方文件的個人翻譯，如有翻譯錯誤，請多多指出
原文地址：https://facebook.github.io/re…
特別感謝Hevaen，同時也向豪大React群所有成員表示感謝，從你們身上我學到很多。

介紹JSX

我們來看一下下面的變數宣告

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

這是有意思的標記語法既不是字串又不是HTML。

It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.

我們稱他為JSX。它是屬於JavaScript的語法擴充。我們希望react用jsx去描述UI應該是什麼樣子的。JSX也許會讓你想到某些模板語言,但它帶有JavaScript的全部威力。

JSX produces React “elements”. We will explore rendering them to the DOM in the next section. Below, you can find the basics of JSX necessary to get you started.

JSX 生成React的“元素”。我們將會在下一章探索他們是怎麼在DOM裡渲染的。接下來，你能找到JSX最重要的基礎知識來讓你開始學習

Embedding Expressions in JSX

在JSX裡面插入表示式

You can embed any JavaScript expression in JSX by wrapping it in curly braces.
你能用花括號包住JavaScript 表示式然後插入JSX裡

For example, 2 + 2, user.firstName, and formatName(user) are all valid expressions:
例如，2 + 2, user.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`)
);

We split JSX over multiple lines for readability. While it isn`t required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of automatic semicolon insertion.

為了可讀性，我們把JSX分到多個行裡。雖然不是必需的,當這樣做時,我們還建議包在大括號來避免自動分號的陷阱。

JSX is an Expression Too

JSX也是一個表示式
After compilation, JSX expressions become regular JavaScript objects.
編譯後,JSX表示式成為常規的JavaScript物件。
This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions:
這意味著您可以在JSX中使用 if語句和迴圈,將其分配給變數,接受它作為引數,並從函式中返回。

Specifying Attributes with JSX

You may use quotes to specify string literals as attributes:

你可以使用引號指定字串的屬性:

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

You may also use curly braces to embed a JavaScript expression in an attribute:
你也可以使用括號將JavaScript表示式嵌入到一個屬性:

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

Don`t put quotes around curly braces when embedding a JavaScript expression in an attribute. Otherwise JSX will treat the attribute as a string literal rather than an expression. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.

嵌入表示式的時候，不要在花括號裡面在寫引號。否則JSX將屬性作為一個字串,而不是一個表示式。你應該用引號(對字串而言)或大括號(表示式),但不是在同一個屬性上同時使用他。

Specifying Children with JSX

JSX中指定子元素

If a tag is empty, you may close it immediately with />, like XML:
如果一個標籤是空的,你可以立即關閉它/ >,如XML:

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

JSX tags may contain children:
JSX標籤可以包含子元素:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

Caveat:
Since JSX is closer to JavaScript than HTML, React DOM uses camelCase property naming convention instead of HTML attribute names.
For example, class becomes className in JSX, and tabindex becomes tabIndex.
警告:自從JSX更接近JavaScript而不是HTML， React DOM中我們使用class作為標籤的屬性，而在JSX中我們使用className（因為class是js的保留字）
例如,類成為JSX className,tabindex變成了tabindex。

JSX Prevents Injection Attacks

JSX防止注入攻擊

It is safe to embed user input in JSX:

JSX中直接巢狀使用者在表單表單中輸入的值是安全的。

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

By default, React DOM escapes any values embedded in JSX before rendering them.
預設情況下,React DOM會在渲染元素前轉義JSX中的任何巢狀的值
Thus it ensures that you can never inject anything that`s not explicitly written in your application.
因此,確保你永遠不能注入任何沒有明確的寫在您的應用程式
Everything is converted to a string before being rendered.
一切都是在渲染之前轉換為一個字串。
This helps prevent XSS (cross-site-scripting) attacks.
這有助於防止XSS攻擊(跨站指令碼)。

JSX Represents Objects

JSX物件

Babel compiles JSX down to React.createElement() calls.
Babel 編譯 JSX 成 React.createElement() 呼叫。

These two examples are identical:
這兩個例子都是相同的:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
const element = React.createElement(
  `h1`,
  {className: `greeting`},
  `Hello, world!`
);

React.createElement() performs a few checks to help you write bug-free code but essentially it creates an object like this:

React.createElement()執行幾個檢查,幫助你寫出沒有錯誤程式碼但本質上它建立一個物件是這樣的:

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

These objects are called “React elements”. You can think of them as descriptions of what you want to see on the screen.React reads these objects and uses them to construct the DOM and keep it up to date.We will explore rendering React elements to the DOM in the next section.

這些物件被稱為“React元素”。你可以把它們作為描述你想在螢幕上看到的東西。
React讀取這些物件,並使用它們構造DOM並保持更新。在下一節,我們將探討渲染React元素到DOM上。

相關文章