30-React JSX IN DEPTH

JSX IN DEPTH

---

JSX

从根本上说，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 )

指定React元素类型

一个JSX标签的第一部分确定了React元素的类型。

大写类型表明JSX标签是一个React组件。这些标签会被编译成可以直接引用的命名变量，因此，如果您使用JSX 表达式，Foo必须是在范围内。

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

使用点符号的JSX类型

你可以使用点表示法引用内部的JSX组件。对于如果你有一个单一的模块需要导出很多React组件非常的方便。例如：

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

用户定义的组件必须大写

• 当一个元素类型以小写字母开头，它引用的是一个内置组件就像
  或并且最终作为一个字符串'div'或'span'传递给React.createElement。
• 定义，或者从文件中导入到JavaScript的组件，一个大写字母开头的类型例如将会被编译成React.createElement(Foo)。
• 定义的组件应该以大写字母开头。如果您有以小写字母开头的组件，在JSX使用之前将其分配给一个大写的变量。否则将会报错

运行时类型选择

你不能使用一般的表达式作为React元素类型。。如果你想使用一般表达式来表示React元素的类型，只需要把它分配给一个首字母大写的变量。例如：

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

JSX中的属性

1. JavaScript表达式 
   
   你可以通过任何JavaScript表达式作为属性，用{}包裹。例如：

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

2.字符串字面量

你可以传递一个字符串作为属性。例如：

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

1. Props 默认值为 "True"
   
   如果你没有传递值给一个属性，它默认为true。以下两个JSX表达式 是相同的： （不建议使用）

<MyTextBox  autocomplete />
<MyTextBox  autocomplete={true} />

4.展开属性

如果你已经有了props一个对象，并希望将它传递给JSX，你可以用...一个“spread” 操作符来传递整个属性对象。以下两种组件时等效的：

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

Children in JSX

在同时包含一个开口标记和结束标记的JSX表达式，这些标签之间的内容传递作为一种特殊的属性：props.children。有几种不同的方式来传递的孩子：

1.字符串字面量 例如：

Hello world!

JSX会去掉的开头和结尾的空格，字符串中间的换行将会被压缩成一个空格。所以以下代码都是相同的：

		<div>Hello World</div>
<div>
Hello World
</div>
   	<div>
   	 	Hello
   		World
   	</div> 

1. JSX Children：
   
   你可以提供更多的JSX元素作为孩子，这对于嵌套组件来说很有用。例如：

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

1. JavaScript表达式：
   
   你可以传递任何JavaScript表达式作为孩子，用大括号（{}
   
   ）括起来。例如，这些表达式是等效的：

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

1. Functions as Children
   
   传递到自定义组件的孩子可以是任何东西，只要该组件将它们转换为React渲染之前可以理解。这种用法是不常见的，但如果你想扩展JSX能力的话很有效。
2. Booleans, Null, and Undefined 会被忽略 
   
   false，null，undefined，和true这类的儿童。React不会区域渲染。以下这些JSX表达式将全部呈现到同样的事情：

<div />
<div></div>
 <div>{false}</div>
<div>{null}</div>
<div>{true}</div>

6.这些作为条件渲染会很有用，例如当showHeader是true的时候呈现一个

：

<div>
 	{showHeader && <Header />}
	<Content />
</div>
如果你想有一个类似的值false，true，null，或undefined出现在输出中，你必须将它们转换成字符串。例如：
<div>
My JavaScript variable is {String(myVariable)}.
</div>