React版本：15.4.2
**翻譯：xiyoki **

從根本上說幸缕，JSX只是為React.createElement(component, props, ...children)函數(shù)提供語法糖继低。JSX代碼：

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

編譯成：

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

如果沒有子代海蔽，也可以使用標記的自關閉形式脚仔。所以：
<div className="sidebar" />
編譯成：

React.createElement(
  'div',
  {className: 'sidebar'},
  null
)

如果你想測試一些特定的JSX是如何轉換成Javascript汁掠，你可以試試在線Babel編譯器炬太。

Specifying The React Element Type（指定React元素類型）

JSX標記的第一部分決定了React元素的類型屏富。
大寫的類型表示JSX標簽指的是React組件。這些標簽被編譯為對命名變量的直接引用养叛，因此如果使用JSX<Foo />表達式种呐，Foo則必須在作用域中。

React Must Be in Scope（React必須在作用域中）

由于JSX編譯需調用React.createElement,因此React庫還必須始終在JSX代碼的作用域中弃甥。
例如爽室，這兩個import在此代碼中是必需的，即使React和CustomButton不是從Javascript直接引用的：

import React from 'react';
import CustomButton from './CustomButton';

function WarningButton() {
  // return React.createElement(CustomButton, {color: 'red'}, null);
  return <CustomButton color="red" />;
}

如果你沒有使用Javascript捆綁器淆攻，并且將React作為一個script標簽進行添加阔墩，那么React已經(jīng)作為全局React存在于作用域中。

Using Dot Notation for JSX Type（對JSX類型使用點符號）

你可以使用JSX中的點表示法來引用React組件瓶珊。如果你有一個模塊啸箫，通過該方式導出許多React組件是很方便的。例如伞芹，如果MyComponents.DatePicker是一個組件忘苛，你可以直接在JSX中使用它：

import React from 'react';

const MyComponents = {
  DatePicker: function DatePicker(props) {
    return <div>Imagine a {props.color} datepicker here.</div>;
  }
}

function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;
}

User-Defined Components Must Be Capitalized（用戶自定義的組件必須大寫）

當元素類型以小寫字母開頭時，它指向類似于<div>或<span>的內置組件丑瞧，并生成字符串'div'或'span'傳遞給React.createElement柑土。以大寫字母開頭的元素類型，如<Foo />編譯到React.createElement(Foo)绊汹，并且同JavaScript文件中已定義或已導入的組件相對應稽屏。
我們建議你使用大寫字母命名組件。如果你有一個以小寫字母開頭的組件西乖，請在將其用于JSX之前將其分配給大寫的變量狐榔。
例如坛增，此代碼不會按預期運行：

import React from 'react';

// Wrong! This is a component and should have been capitalized:
function hello(props) {
  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
  return <div>Hello {props.toWhat}</div>;
}

function HelloWorld() {
  // Wrong! React thinks <hello /> is an HTML tag because it's not capitalized:
  return <hello toWhat="World" />;
}

為了解決這個問題，我們將重命名hello為Hello薄腻，并且在引用它的時候使用<Hello />:

import React from 'react';

// Correct! This is a component and should be capitalized:
function Hello(props) {
  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
  return <div>Hello {props.toWhat}</div>;
}

function HelloWorld() {
  // Correct! React knows <Hello /> is a component because it's capitalized.
  return <Hello toWhat="World" />;
}

Choosing the Type at Runtime(在運行時選擇類型)

不能將常規(guī)表達式用作React元素類型收捣。如果你想使用一個通用表達式來表示元素的類型，只需先將它賦給一個大寫的變量庵楷。這通常出現(xiàn)在你想基于一個prop渲染一個不同的組件：

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // Wrong! JSX type can't be an expression.
  return <components[props.storyType] story={props.story} />;
}

為了解決這個問題罢艾，我們將首先將類型指定為大寫變量：

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // Correct! JSX type can be a capitalized variable.
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}

Props in JSX（JSX中的Props）

在JSX中指定prop有幾種不同的方法。

JavaScript Expressions（JavaScript表達式）

你可以傳遞任何JavaScript表達式作為props尽纽，用{}包裹它咐蚯。例如，在這個JSX中：

<MyComponent foo={1 + 2 + 3 + 4} />

對于MyComponent的props.foo的值將是10弄贿，因為表達式1 + 2 + 3 + 4被求值春锋。
if語句和for循環(huán)不是JavaScript表達式，因此它們不能直接在JSX中使用差凹。相反期奔，你可以把這些語句放置到JSX代碼周圍。例如：

function NumberDescriber(props) {
  let description;
  if (props.number % 2 == 0) {
    description = <strong>even</strong>;
  } else {
    description = <i>odd</i>;
  }
  return <div>{props.number} is an {description} number</div>;
}

String Literals（字符串字面量）

你可以傳遞一個字符串字面量作為prop危尿。這兩個JSX表達式是等價的：

<MyComponent message="hello world" />

<MyComponent message={'hello world'} />

當你傳遞一個字符串字面量時呐萌，它的值是HTML-unescaped。所以這兩個JSX表達式是等價的：

<MyComponent message="<3" />

<MyComponent message={'<3'} />

此行為通常不相關谊娇。這里只提到完整性搁胆。

Props Default to "True"（Props默認為'True'）

如果你傳遞一個prop沒有值，它默認為true邮绿。
這兩個JSX表達式是等價的：

<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

一般來說，我們不建議使用這個攀例，因為它會與** ES6 object shorthand（ES6對象速記）**混淆船逮，{foo}是{foo:foo}的簡寫，而不是{foo:true}的簡寫粤铭。這種行為只是存在挖胃，以便于它匹配HTML的行為。

Spread Attributes（擴展屬性）

如果你已經(jīng)有一個props對象梆惯，并且想要在JSX中傳遞它酱鸭，你可以使用...作為一個'spread'運算符傳遞整個props對象。這兩個組件是等效的：

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

當構建通用容器時垛吗，擴展屬性可能很有用凹髓。然而它們也可以很容易地將大量的不相關props傳遞給不關心它們的組件，從而讓你的代碼凌亂怯屉。我們建議你謹慎使用此語法蔚舀。

Children in JSX（JSX中的子級）

在包含開始標記和結束標記的JSX表達式中饵沧，這些標記之間的內容作為特殊的props傳遞：props.children。有幾種不同的方式傳遞children：

String Literals（字符串字面量）

你可以在開始和結束標簽之間放置一個字符串赌躺，props.children就是那個字符串狼牺。這對許多內置的HTML元素很有用。例如：

<MyComponent>Hello world!</MyComponent>

這是有效的JSX礼患，MyComponent中的props.children將是簡單的"hello world!"字符串是钥。HTML是非轉義的，所以你通趁宓可以像寫HTML那樣寫JSX:

<div>This is valid HTML & JSX at the same time.</div>

JSX刪除行的開始和結尾處的空格悄泥。它也刪除空白行。與標簽相鄰的新行被刪除痪署；在字符串文字中間出現(xiàn)的新行被壓縮到一個空格中码泞。所以這些都渲染同樣的事情：

<div>Hello World</div>

<div>
  Hello World
</div>

<div>
  Hello
  World
</div>

<div>

  Hello World
</div>

JSX Children（JSX子級）

你可以提供更多的JSX元素作為children。這對于渲染嵌套組件很有用：

<MyContainer>
  <MyFirstComponent />
  <MySecondComponent />
</MyContainer>

你可以混合不同類型的children狼犯，所以你可以將字符串字面量與JSX children一起使用余寥。這是JSX的另一種方式，就像HTML一樣悯森，所以這是有效的JSX和有效的HTML:

<div>
  Here is a list:
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

React組件不能返回多個React元素宋舷，但是單個JSX表達式可以有多個子元素，因此如果你想要一個組件渲染多個元素瓢姻，你可以將其封裝在像div這樣的標簽中祝蝠。

JavaScript Expressions（JavaScript 表達式）

你可以將任何JavaScript表達式作為子表達式傳遞，將其放在{}中幻碱。例如绎狭，這些表達式是等價的：

<MyComponent>foo</MyComponent>

<MyComponent>{'foo'}</MyComponent>

這通常用于渲染任意長度的JSX表達式列表。例如褥傍，這將渲染一個HTML列表：

function Item(props) {
  return <li>{props.message}</li>;
}

function TodoList() {
  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  return (
    <ul>
      {todos.map((message) => <Item key={message} message={message} />)}
    </ul>
  );
}

JavaScript 表達式可以與其他類型的children混合使用儡嘶。這通常用于替換字符串模板：

function Hello(props) {
  return <div>Hello {props.addressee}!</div>;
}

Functions as Children(子級為函數(shù))

通常，插入JSX中的JavaScript 表達式將被計算為一個字符串恍风、一個React元素或由這些事物構成的一個列表蹦狂。然而，props.children的工作就像任何其他prop朋贬，因為它可以傳遞任何類型的數(shù)據(jù)凯楔，而不只是React知道如何渲染的數(shù)據(jù)。例如锦募，如果你有自定義組件摆屯，你可以將回調函數(shù)作為props.children：

// Calls the children callback numTimes to produce a repeated component
function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
  }
  return <div>{items}</div>;
}

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}
    </Repeat>
  );
}

傳給自定義組件的子項可以是任何東西，只要該組件在渲染之前將它們轉換為React可以理解的東西即可御滩。這種用法不常見鸥拧，但如果你想伸展JSX的能力党远，這種用法是可行的。

Booleans, Null, and Undefined Are Ignored（忽略Booleans, Null 和 Undefined）

false, null, undefined,和true是有效的children富弦。它們根本不渲染沟娱。這些JSX表達式將渲染相同的東西：

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

這對于條件性地渲染React元素很有用。如果showHeader為true,這個JSX只渲染一個<Header>:

<div>
  {showHeader && <Header />}
  <Content />
</div>

警告腕柜，一些假的值济似，如數(shù)字0，仍然由React渲染盏缤。例如砰蠢，此代碼將不會像你預期的那樣工作，因為當props.messages為空數(shù)組時唉铜，0將打犹ú铡：

<div>
  {props.messages.length &&
    <MessageList messages={props.messages} />
  }
</div>

要解決這個問題，請確保前面的&&表達式總是布爾值：

<div>
  {props.messages.length > 0 &&
    <MessageList messages={props.messages} />
  }
</div>

相反潭流，如果你想有一個類似false, null, undefined,和true的值出現(xiàn)在輸出中竞惋，首先，你必須把它轉化為字符串：

<div>
  My JavaScript variable is {String(myVariable)}.
</div>

ADVANCED GUIDES

1.JSX In Depth
2.Typechecking With PropTypes
3.Refs and the DOM
4.Uncontrolled Components
5.Optimizing Performance
6.React Without ES6
7.React Without JSX
8.Reconciliation
9.Context
10.Web Components
11.Higher-Order Components