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中的属性

JavaScript表达式

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

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

2.字符串字面量

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

<MyComponent message="hello world" />

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

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>

JSX Children：

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

<MyContainer>

   <MyFirstComponent />

   <MySecondComponent />

</MyContainer>

JavaScript表达式：

你可以传递任何JavaScript表达式作为孩子，用大括号（{}

）括起来。例如，这些表达式是等效的：

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

Functions as Children

传递到自定义组件的孩子可以是任何东西，只要该组件将它们转换为React渲染之前可以理解。这种用法是不常见的，但如果你想扩展JSX能力的话很有效。
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>