1.JSX In Depth（JSX深度）

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

从根本上说，JSX只是为React.createElement(component, props, ...children)函数提供语法糖。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已经作为全局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(在运行时选择类型)

不能将常规表达式用作React元素类型。如果你想使用一个通用表达式来表示元素的类型，只需先将它赋给一个大写的变量。这通常出现在你想基于一个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循环不是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（扩展属性）

如果你已经有一个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删除行的开始和结尾处的空格。它也删除空白行。与标签相邻的新行被删除；在字符串文字中间出现的新行被压缩到一个空格中。所以这些都渲染同样的事情：

<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(子级为函数)

通常，插入JSX中的JavaScript 表达式将被计算为一个字符串、一个React元素或由这些事物构成的一个列表。然而，props.children的工作就像任何其他prop，因为它可以传递任何类型的数据，而不只是React知道如何渲染的数据。例如，如果你有自定义组件，你可以将回调函数作为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>

警告，一些假的值，如数字0，仍然由React渲染。例如，此代码将不会像你预期的那样工作，因为当props.messages为空数组时，0将打印：

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

要解决这个问题，请确保前面的&&表达式总是布尔值：

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

相反，如果你想有一个类似false, null, undefined,和true的值出现在输出中，首先，你必须把它转化为字符串：

<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