深入 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';

//正确！组件需要以大写字母开头：
function Hello(props) {
	//正确！这种 <div> 的使用是合法的，因为 div 是一个有效的 HTML 标签：
	return <div>Hello {props.toWhat}</div>;
}

function HelloWorld(){
	//正确!React知道 <Hello /> 是一个组件，因为它是大写字母开头的：
	return <Hello toWhat="World" />;
}

在运行时选择类型

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

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

解决这个问题，首先将类型赋值改一个大写字母开头的变量：

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

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

function Story(props){
	//正确！JSX类型可以时大写字母开头的变量。
	const SqecificStory = components[props,storyType];
	return <SpecificStory story={props.story} />;
}

JSX 中的 Props

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

javaScript 表达式作为 Props

你可以把包裹在 {} 中的 javascript 表达式作为一个 prop 传递给 JSX 元素。例如，如下的 JSX：
<MyComponent foo = { 1 + 2 + 3 + 4 } />
在 MyComponent中，props.foo 的值等于 1+2+3+4 的执行结果 10。
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>;
}

字符串字面量

你可以将字符串字面量赋值给 prop 如下两个 JSX 表达式时等价的：

<MyComponent message="hello world" />

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

当你将字符串字面量赋值给 prop 时，它的值时为转义的。所以，以下两个 JSX 表达式时等价的：

<MyComponent message="&lt;3" />

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

这种行为通常是不重要的，这里只是提醒有这个用法。

Props 默认值为 “True”

如果你没给 prop 赋值，它的默认值是 true 。以下两个 JSX 表达式是等价的；

<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

通常，我们不建议这样使用，因为它可能与 ES6对象简写，{foo} 是 {foo:foo} 的简写，而不是 {foo:true} 。 这样实现只是为了保持和 HTML 中标签属性的行为一致。

属性展开

如果你已经有了一个 props 对象，你可以使用展开运算符 ... 来在JSX中传递整个 props 对象。以下两个组件是等价的：

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

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

你还可以选择只保留当前组件需要接收的 props ，并使用展开运算符将其他porps 传递下去。

const Button = props =>{
	const { kind, ...other } = props;
	const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton" ;
	return <button className={className} {...other} />;
};

const App = () =>{
	return(
		<div>
			<Button kind="primary" onClick={() => console.log("clicked!")}>
			Hello World！
			</Button>
		</div>	
	);
};

在上述例子中，kind 的 prop 会被安全的保留，他将不会被传递给DOM中的 <button>元素。所有其他的 props 会通过 ...other对象传递，使得这个组件的应用可以非常灵活。你可以看到它传递了一个 onClick 和 children 属性。

属性展开在某些情况下很有用，但是也很容易将不必要的props 传递给不相关的组件，或者将无效的 HTML 属性传递给 DOM 。

JSX中的子元素

包含在开始和结束标签之间的 JSX 表达式内容将作为特定属性 props.children 传递给外层组件，有几种不同的方法来传递元素：

字符串字面量

你可以将字符串放在开始和结束标签之间，此时 props.children 就只是该字符串。这对于横夺内置的 HTML 元素横有用。

<MyComponent>Hello World!</MyComponent>

是一个合法的 JSX ，MyComponent 中的 props.children 是一个简单的未转义字符串。 因此可以用编写 HTML 的方式编写JSX。

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

JSX 会移除行首尾的空格以及空行。与标签相邻的空行均会被删除，文本字符串之间的新行会被压缩为一个空格。因此以下的几种方式都是等价的：

<div>Hello World</div>

<div>
Hello World
</div>

<div>
Hello
World
</div>

<div>

Hello World
</div>

JSX子元素

子元素允许有多个 JSX 元素组成，这对于嵌套组件非常有用:

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

可以将不同类型的子元素混合在一起，因此可以将字符串字面量与 JSX 子元素一块使用。这也是 JSX 类似 HTML 的一种表现，所以如下代码是合法的 JSX 并且也是合法的 HTML：

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

React 组件也能够返回存储在数组中的一组元素：

render() {
	// 不需要用额外的元素包裹列表元素！
	return [
		// 不要忘记设置 key 值
		<li key="A">First item</li>,
		<li key="B">Second item</li>,
		<li key="C">Third item</li>,
	];
}

javascript 表达式作为子元素

javascript 表达式可以被包裹早 {} 中作为子元素。例如，以下表达式是等价的：

<MyComponent>foo</MyComponent>

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

这对于展示任意长度的列表非常有用。例如，渲染 HTML 列表：

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

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

javascript 表达式也可以和其他类型的子元素组合。这种做法可以方便的替代模板字符串：

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

函数作为子元素

通常，JSX中的 Javascript 表达式将会被计算为字符串，React 元素或者列表。不过，props.children 和其他 prop 一样，它可以传递任意类型的数据，而不仅仅是 React 已知的可渲染类型。例如你有一个自定义组件，你可以把回调函数作为 props.children 进行传递：

// 调用子元素回调 numTimes 次，来重复生成组件
function Repeat(props) {
	let items = [];
	for(let i=0 ; i< props.numTimes:i++){
		item.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 。

布尔类型，Null 以及 Undefined 建辉忽略

false , null , underfined 和 true 是合法的子元素。但它们并不会被渲染。以下的 JSX 表达式渲染结果相同：

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{underfined}</div>

<div>{true}</div>

这有助于一句特定条件来渲染其他的 React 元素。例如，在以下 JSX 中，仅当 showHeader 为 true 时，才会渲染 <Header /> :

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

值得注意的是有一些 “falsy” 值，如数字 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 ，true ， null ，underfined 等值，你需要先将它们转换为字符串；

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