> For the complete documentation index, see [llms.txt](https://zg-zhang.gitbook.io/note/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zg-zhang.gitbook.io/note/react/offical-website/advanced-guides/jsx-in-depth.md).

# 深入JSX

JSX In Depth

* 实际上，JSX 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖

## 指定 React 元素类型

* JSX 标签的第一部分指定了 React 元素的类型
* 大写字母开头的 JSX 标签意味着它们是 React 组件
  * 这些标签会被编译为命名变量的直接引用

### React 必须在作用域内

* 由于 JSX 会编译为 React.createElement 调用形式，所以 React 库也必须包含在 JSX 代码作用域内
* 在 JSX 中 React 即使没有被直接调用，也需要导入
* 如果你不使用 JavaScript 打包工具而是直接通过 script 标签加载 React，则必须将 React 挂载到全局变量中

### 在 JSX 类型中使用点语法

* 在 JSX 中，你可以使用点语法来引用一个 React 组件。
* 当你在一个模块中导出许多 React 组件时，这会很方便

  \`\`\`jsx harmony

const MyComponents = { DatePicker: function DatePicker(props) { return Image a {props.color} datepicker here. } }

function BlueDatePicker() { return  }

````
### 用户定义的组件必须以大写字母开头

* 以小写字母开头的元素代表一个 HTML 内置组件，比如 div span 会生成相应的字符串 'div' 'span' 传递给 React.createElement 作为参数
* 大写字母开头的元素相应着在 JavaScript 引入或自定义的组件 `<Foo />` 会编译为 React.createElement(Foo)

* 如果确实需要一个以小写字母开头的组件，则在 JSX 使用它之前，必须将它赋值给一个大写字母开头的变量

### 在运行时选择类型

* 不能将通用表达式作为 React 元素类型
* 如果你想通过通用表达式来 动态 决定元素类型，你首先要将它赋值给大写字母开头的变量
    * 这通常用于根据 prop 来渲染不同组件的情况下
```jsx harmony

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

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

function Story(props) {
  // 错误！JSX 类型不能是一个表达式。
  return <components[props.storyType] story={props.story} />;

  // 正确！JSX 类型可以是大写字母开头的变量。
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}
````

## JSX 中的 Props

* 有多种方式可以在 JSX 中指定 props

### JavaScript 表达式作为 Props

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

### 属性展开

// 以下两个组件是等价的 \`\`\`jsx harmony

function App1() { return ; }

function App2() { const props = {firstName: 'Ben', lastName: 'Hector'}; return ; }

\`\`\`