深入 JSX（React）

JSX仅仅只是 React.createElement(component,porps,...children)函数的语法糖。

<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
)

指定 React 元素类型

JSX 标签的第一部风指定了 React 元素的类型。

大写字母开头的 JSX 标签意味着它们是 React 组件。这些标签会被编译为对命名变量的直接引用，所以，当你使用 JSX <Foo /> 表达式时, Foo 必须包含在作用域内。

React 必须在作用域内

由于 JSX 会编译为 React.createElement 调用形式，所有 React 库也必须包含在 JSX 代码作用域内。

例如，在如下代码中，虽然 React 和 CustomButton 并没有被直接使用，但还是需要导入：

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

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

如果你不使用 Javavscript 打包工具而是直接通过 <script> 标签加载 React ，则必须将 React 挂载到全局变量中。

在 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" />;
}

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

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

我们建议使用大写字母开头命名自定义组件。如果你确实需要一个以小写字母开头的组件，则在 JSX 中使用它之前，必须将它赋值给一个大写字母开头的变量。

例如，以下的代码将无法按照预期运行：

import React from 'react';

//错误！组件应该以大写字母开头：
function hello(porps) {
   

	//正确！这种 <div> 的使用是合法的，因为 div 是一个有效的 HTML 标签
	return <div> Hello {
   props.toWhat} </div>;
}

function HelloWorld () {
   
	//不对，这样会认为 <hello /> 是一个 HTML 标签，因为它没有以大写字母开头:
	return <hello toWhat="world" />;
}

要解决这个问题，我们需要重命名 hello 为 Hello ，同时在 JSX 中使用 <Hello />；

import React from 'react';