十二、深入理解JSX

十二、深入理解JSX

从根本上讲，JSX就是提供了一个React.createElement(component, props, ...children)函数的语法糖。就像下面的JSX代码：

<MyButton color="blue" shadow={2}>    Click Me</MyButton>

经过编译后为：

React.createElement(    MyButton,    {color: 'blue', shadow: 2},    'Click Me')

如果一个标签没有子元素的话，你可以使用/>来自动闭合。例如：

<div className="sidebar" />

经过编译后为：

React.createElement(    'div',    {className: 'sidebar'},    null)

如果你想测试一些特定的JSX是如何转换成JavaScript的话，你可以试试在线Babel编译器。

指定React元素类型

JSX标记的第一部分决定了React元素的类型。

首字母大写的类型表示JSX标记指的为React组件。 这些标签被编译为对指定变量的直接引用，因此如果使用JSX <Foo />表达式，Foo必须在当前的作用域内。

React必须在作用域内

由于JSX编译的本质是对React.createElement的调用，因此React库也必须始终在JSX代码的作用域中。
例如，虽然CustomButton没有直接引用React，但是这两个导入的模块在这段代码中也还是很有必要的：

import React from 'react';import ReactDOM from 'react-dom';function WarningButton(props) {    // return React.createElement(CustomButton, {color: 'red'}, null);    return <CustomButton color="red" />}

如果不使用JavaScript打包工具并将React通过script标签引入，那么它就会作为一个全局变量React。

对JSX类型使用『点』表示符

您还可以使用JSX中的点表示符来引用React组件。 如果您有一个模块会导出很多React组件的话，使用这种方法就会十分方便。 例如，如果MyComponents.DatePicker是一个组件，您可以直接从JSX使用它：

import React from 'react';import ReactDOM from 'react-dom';const MyComponents = {    DatePicker(props) {        return <div>这里有一个颜色为{props.color}的日期选择器</div>    }};function BlueDataPicker(props) {    return <MyComponents.DatePicker color="blue" />}ReactDOM.render(    <BlueDataPicker />,    document.getElementById('root'));

用户自定义组件必须是首字母大写

当元素类型以是小写字母开头时，它指向一个内置组件，如<div>或<span>，并生成一个字符串'div'或'span'传递给React.createElement。 以大写字母开头的类型，如<Foo />编译为React.createElement(Foo)，并且在当前作用域内寻找这个名称为Foo的已定义或已导入组件。

我们建议使用首字母大写命名组件。 如果你有一个以小写字母开头的组件，请在JSX中使用它之前请将它赋值给一个首字母大写的变量。

下面代码不会按预期运行：

import React from 'react';//这是错误的，这个组件应该为首字母大写function hello(props) {    // 这是正确的，因为div是一个有效的html标签    return <div>Hello {props.name}</div>;}function HelloWorld(props) {    // 这是错误的，因为它是首字母小写，所以React认为<hello />是一个html标签    return <hello name="zhangyatao" />}

想要修复上面的问题，我们必须将hello重命名为Hello，通过<Hello />来使用该组件：

import React from 'react';// 这是正确的function Hello(props) {    return <div>Hello {props.name}</div>;}function HelloWorld(props) {    // 这是正确的    return <Hello name="zhangyatao" />;}

在运行的时候选择组件类型

不能将常规的javascript表达式用作React元素类型。 如果你想使用一个通用表达式来表示元素的类型，只需将它赋值给一个首字母大写的变量即可。 这通常出现在当你想基于同一个props渲染一个不同的组件的情况下：

import React from 'react';import {Com1, Com2} from './Components';const components = {    myCom1: Com1,    myCom2: Com2}function RunCom(props) {    // 这是错误的，JSX的类型不能这么写    return <components[props.comType] type={props.type} />;}

想要解决上面的问题，只需要将它们赋值给一个首字母大写的变量即可：

import React from 'react';import {Com1, Com2} from './Components';const components = {    myCom1: Com1,    myCom2: Com2}function RunCom(props) {    // 这是正确的，将它们赋值给一个首字母大写的变量    const MyCom = components[props.comType];    return <MyCom type={props.type} />;}

JSX中的Props

在JSX中指定Props有以下几种不同的方法。

JavaScript表达式

你可以传递任何JavaScript表达式作为Props，用{}括住它们就可以使用。 例如，在这个JSX中：

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

对于MyComponent来说，props.foo的值将为10，因为是通过表达式1 + 2 + 3 + 4计算得到的。

if语句和for循环在JavaScript中不是表达式，因此它们不能在JSX中直接使用。 相反，写完它们之后你可以把JSX放在里面。 例如：

function NumberDescriber(props) {    let description;    if (props.number % 2 === 0) {        description = <strong>偶数</strong>    } else {        description = <strong>奇数</strong>    }    return <div>{props.number}是一个{description}.</div>;}

字符串直接量

你可以传递一个字符串内容作为props。 这两个JSX表达式是等价的：

<MyComponent message="hi zhangyatao" /><MyComponent message={'hi zhangyatao'} />

当你传递一个字符串直接量时，它的值是经过html转义的。 所以这两个JSX表达式是等价的：

<MyComponent message='&lt;3' /><MyComponent message={'<3'} />

Props默认值为true

如果你没有给Props传入一个值，那么它的默认值为true，这两个JSX表达式是等价的：

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

一般来说，我们不建议使用它，因为它可以使用ES6对象的简写{foo}，也就是{foo：foo}的简称会和{foo：true}混淆。 这种行为在这里只是方便它匹配到HTML行为。

Props传递

如果你有一个对象类似的数据作为props，并且想在JSX中传递它，你可以使用...作为一个“spread”运算符传递整个props对象。 这两个组件是等效的：

function App() {    return <Greeting firstName="yatao" lastName="zhang" />;}function App() {    const props = {firstName: 'yatao', lastName: 'zhang'};    return <Greeting {...props} />;}

当创建一个通用容器时，spread props很有用。 
然而，他们也可以让你的代码变得有点凌乱，这样很容易使大量不相关的prps传递给那些不关心它们的组件。 建议您谨慎使用此语法。

JSX中的子元素和子组件

在包含开始标记和结束标记的JSX表达式中，这些标记之间的内容通过一种特殊的prop：props.children传递。 有几种不同的方式传递子组件：

字符串直接量

你可以在开始和结束标签之间放一个字符串，那么props.children就是那个字符串。 这对许多内置的HTML元素很有用。 例如：

function MyComponent(props) {    return <div>{props.children}<div>; //=> <div>hello zhangyatao</div>}<MyComponent>Hello zhangyatao</MyComponent>

这是有效的JSX，并且MyComponent中的props.children将是字符串“Hello zhangyatao”。 HTML标签是不会经过转义的，所以你一般可以写JSX就像你写HTML一样：

<div>这是一个html标签 &amp; 同时也是个JSX</div>

JSX会删除行的开始和结尾处的空格。 它也会删除中间的空行。 与标签相邻的空行被会被删除;在字符串文本中间出现的空行会缩合成一个空格。 所以这些都渲染相同的事情：

<div>hello zhangyatao</div><div>    hello zhangyatao</div><div>    hello    zhangyatao</div><div>hello zhangyatao</div>

JSX子元素

你可以使用很多个JSX元素作为子元素。 这对需要嵌套的显示类型组件很有用：

<Dialog>    <DialogHeader />    <DialogBody />    <DialogFooter /></Dialog>

你可以将不同类型的子元素混合在一起，因此JSX子元素可以与字符串直接量一起使用。 这是JSX的另一种方式，就像一个HTML一样：

<div>    这是一个列表    <ul>        <li>item 1</li>        <li>item 2</li>    </ul></div>

一个React组件不可能返回多个React元素，但是一个JSX表达式可以包含多个子元素，因此如果你想让一个组件渲染多个东西，你可以将它们统一放置在就像上面那样的div中。

Javascript表达式

您可以将任何JavaScript表达式放在{}中作为子组件传递。 例如，下面这些表达式是等价的：

function MyComponent(props) {    return <div>{props.children}<div>; //=> <div>hi zhangyatao</div>}<MyComponent>hi zhangyatao</MyComponent><MyComponent>{'hi zhangyatao'}</MyComponent>

这通常用于渲染任意长度的JSX表达式列表。 例如，这将渲染一个HTML列表：

function Item(props) {    return <li>{props.message}</li>;}function TodoList(props) {    const todos = ['完成文档', '出去逛街', '打一局dota'];    return (        <ul>            {todos.map(message => <Item key={message} message={message} />)}        </ul>    );}

JavaScript表达式可以与其他类型的子元素混合使用。 这通常用于替换字符串模板：

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

使用函数作为子元素

通常，插入JSX中的JavaScript表达式都最终返回为一个字符串、React元素、一个列表。

当然，props.children可以像任何其他props那样工作，它可以传递任何类型的数据，并不局限于那些告诉React应该如何渲染的东东。 例如，如果您有一个自定义组件，您可以将props.children作为一个回调函数：

import React from 'react';import ReactDOM from 'react-dom';function Repeat(props) {    let items = [];    let callback = props.children;    var numTimes = props.numTimes;    for(var i = 0 ; i < numTimes ; i++ ){        items.push(callback(i));    }    return <div>{items}</div>;}function ListOfTenThings(props) {    return (        <Repeat numTimes={10}>            {index => <div key={index}>这是列表中的第{index}项</div>}        </Repeat>    );}ReactDOM.render(    <ListOfTenThings/>,    document.getElementById('root'));

传递给自定义组件的子元素可以是任何东西，只要在React在渲染之前，该组件将它们转换为可以理解的东西即可。 这种用法并不常见，如果你想扩展JSX的其他能力，可以通过这个例子了解下它的工作原理。

布尔值、null、undefined在渲染时会被自动忽略

false，null，undefined和true是有效的子元素，不过他们从根本上讲是不参与渲染的。 这些JSX表达式将渲染处相同的东西：

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

这对于有条件地呈现React元素很有用。 如果showHeader为true，那么这个JSX只渲染一个<Header />：

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

如果返回一些“假的”值就会收到一个警告，如数字0，不过React仍然会渲染。 例如，此代码将不会像您预期的那样工作，因为当props.messages是空数组时将打印0：

<div>    {props.messages.length && <Message messages={props.messages} />}</div>

想要修复上面的问题，你要确定这个表达式在&&之前总返回布尔值:

<div>    {props.messages.length > 0 && <Message messages={props.messages} />}</div>

相反，如果你想要一个值如false，true，null或undefined出现在输出中，你必须先将它转换为字符串：

import React from 'react';import ReactDOM from 'react-dom';function MyVariable(props) {    const myVariable = false;    // 如果这里不把false转换为字符串，这只会输出『我的javascript变量是』    const convertedVar = String(myVariable);    return (        <div>            我的javascript变量是{convertedVar}        </div>    );}ReactDOM.render(    <MyVariable/>,    document.getElementById('root'));