title: 高级指南-深入JSX

date: 2017-4-5 17:13:09

深入JSX

从根本上来讲,JSX 仅仅是提供 React.createElement(component, props, ...children) 方法的语法糖。

JS代码:

  1. <MyButton color="blue" shadowSize={2}>
  2. Click Me
  3. </MyButton>

将会被编译为:

  1. React.createElement(
  2. MyButton,
  3. {color: 'blue', shadowSize: 2},
  4. 'Click Me'
  5. )

如果它们(组件/元素)没有子元素,也可以使用自闭合的标签形式,如:

  1. <div className="sidebar" />

将会被编译为:

  1. React.createElement(
  2. 'div',
  3. {className: 'sidebar'},
  4. null
  5. )

如果你要测试特定的 JSX 将会转换为怎样的 JavaScript 代码,可以使用:the online Babel compiler.

指定React元素类型

JSX 标签的第一部分,决定了该元素的类型。

大写开头的 JSX标签 是表示 React 组件。这些标签将被编译为对命名变量的直接引用。所以,如果要使用 <Foo /> 表达式,必须要保证 Foo 必须在作用域内。

React必须在作用域内

由于 JSX 编译为调用 React.createElement,那么 React 库也必须在 JSX 代码 所在的作用域内。

例如,即使 ReactCustomButton 没有直接在 JavaScript 中被引用,顶部的 import 语句也是必须的:

  1. import React from 'react';
  2. import CustomButton from './CustomButton';
  3. function WarningButton() {
  4. // return React.createElement(CustomButton, {color: 'red'}, null);
  5. return <CustomButton color="red" />;
  6. }

即使你没有使用打包工具,且是从 script 标签引入 ReactReact 也是以全局变量的形式存在于作用域内。

对JSX类型使用点分割

你们同样可以使用点表示法来引入 React 组件。如果您有一个导出了多个组件的模块,这样做会很方便。例如,如果 MyComponents.DatePicker 是一个组件,我们可以采用如下方式引入:

  1. import React from 'react';
  2. const MyComponents = {
  3. DatePicker: function DatePicker(props) {
  4. return <div>Imagine a {props.color} datepicker here.</div>;
  5. }
  6. }
  7. function BlueDatePicker() {
  8. return <MyComponents.DatePicker color="blue" />;
  9. }

用户定义的组件必须大写

当一个元素类型是以小写字母开头的,它指的是内置组件,如 <div><span>,并将字符串 'div''span' 传递给 React.createElement。以大写开头的类型如 <Foo /> 将被编译为 React.createElement(Foo),对应在 JavaScript 中定义或导入的组件。

我们建议使用大写字母开头来命名组件。如果您的组件以小写字母开头,请在使用 JSX 之前将其赋值给大写的变量。

例如,以下代码不会如预期运行:

  1. import React from 'react';
  2. // 错误!组件应该大写开头
  3. function hello(props) {
  4. // 正确!div是一个合法的html标签,如下使用是可行的:
  5. return <div>Hello {props.toWhat}</div>;
  6. }
  7. function HelloWorld() {
  8. // 错误! React 认为 <hello /> 是一个HTML标签,因为它不是大写开头的:
  9. return <hello toWhat="World" />;
  10. }

要想解决该问题,我们必须将 hello 重命名为 Hello,并使用 <Hello /> 来引用它:

  1. import React from 'react';
  2. // 正确!组件大写开头:
  3. function Hello(props) {
  4. // 正确!
  5. return <div>Hello {props.toWhat}</div>;
  6. }
  7. function HelloWorld() {
  8. // 正确!React 认为 <Hello /> 是一个组件。
  9. return <Hello toWhat="World" />;
  10. }

在运行时选择类型

你不能使用一个常规表达式作为 React元素 的类型。如果你想用常规表达式来表明元素的的类型,请先将它赋值给一个大写变量。当您要根据属性的变化来渲染不同的组件时,将会遇到此场景:

  1. import React from 'react';
  2. import { PhotoStory, VideoStory } from './stories';
  3. const components = {
  4. photo: PhotoStory,
  5. video: VideoStory
  6. };
  7. function Story(props) {
  8. // 错误!JSX类型不能是一个表达式。
  9. return <components[props.storyType] story={props.story} />;
  10. }

要想解决这个问题,我们可以将值赋给一个大写变量。

  1. import React from 'react';
  2. import { PhotoStory, VideoStory } from './stories';
  3. const components = {
  4. photo: PhotoStory,
  5. video: VideoStory
  6. };
  7. function Story(props) {
  8. // 正确!大写开头的变量能够被正确识别。
  9. const SpecificStory = components[props.storyType];
  10. return <SpecificStory story={props.story} />;
  11. }

JSX 中的属性(Props)

JSX 中,有多种不同的方式来指定属性。

JavaScript表达式

你可以将 JavaScript 表达式传递为属性,使用 {} 包裹。例如:

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

对于 MyComponentprops.foo 的值将会是 10,因为表达式 1+2+3+4 会被计算。

if 语句和 for 循环语句在 JavaScript 中不是表达式,所以不能直接在 JSX 中使用。相反,你可以将它们放在代码中使用,例如:

  1. function NumberDescriber(props) {
  2. let description;
  3. if (props.number % 2 == 0) {
  4. description = <strong>even</strong>;
  5. } else {
  6. description = <i>odd</i>;
  7. }
  8. return <div>{props.number} is an {description} number</div>;
  9. }

字符串

你可以将字符串传递给属性,以下两种方式是等效的:

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

当你传递字符串时,它的值是未转义的。所以,以下两种方式也是等效的:

  1. <MyComponent message="&lt;3" />
  2. <MyComponent message={'<3'} />

这种行为通常是不相关的,在这里提到只是说我们可以这样去用。

属性默认值为"True"

当我们传递一个无值的属性,它的默认值是true。以下两个语法也是等价的:

  1. <MyTextBox autocomplete />
  2. <MyTextBox autocomplete={true} />

一般来说,我们不建议这样使用,因为它可能与ES6对象简写 {foo: foo} 简写为 {foo} 混淆。这种形式之所以存在,是因为它符合HTML的规则。

属性扩散(Spread Attributes)

如果你已经有了一个对象 props,你又想将它传递到 JSX,那么可以使用 ... 来实现扩散操作,将整个 props 对象进行传递。以下两个组件也是等价的:

  1. function App1() {
  2. return <Greeting firstName="Ben" lastName="Hector" />;
  3. }
  4. function App2() {
  5. const props = {firstName: 'Ben', lastName: 'Hector'};
  6. return <Greeting {...props} />;
  7. }

当你构建通用的容器时,属性扩散是非常有用的。然而,它们也非常容易传递给组件很多不相关的属性,从而导致代码变得凌乱。我们建议谨慎的使用此语法。

JSX中的子元素

在包含开始和结束标签的JSX表达式中,标签之间的内容将传递给特定属性 props.children。有几种不同的方法来传递子元素:

字符串

你可以将字符串放在开始和结束标签中,此时 props.children 就只是该字符串。这对于很多内置的HTML元素很有用。例如:

  1. <MyComponent>Hello world!</MyComponent>

这是一个合法的JSX,MyComponent 中的 props.children 是一个简单的字符串 Hello world!。HTML是未转义的,所以同样可以使用如下方式书写:

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

JSX在行首和行尾移除空格。它也移除空行。与标签向邻的新行会被删除,文本字符串之间的新行会被压缩为一个空格。如下以下的几种方式都是等同的:

  1. <div>Hello World</div>
  2. <div>
  3. Hello World
  4. </div>
  5. <div>
  6. Hello
  7. World
  8. </div>
  9. <div>
  10. Hello World
  11. </div>

JSX Children

你能够提供多个JSX元素做为子元素。这对于显示嵌套组件非常有用:

  1. <MyContainer>
  2. <MyFirstComponent />
  3. <MySecondComponent />
  4. </MyContainer>

你也能够组合多种类型的子元素,所以你可以一起使用字符串和JSX组件。这是JSX的类型与HTML的一种形式,这样JSX和HTML都是有效的。

  1. <div>
  2. Here is a list:
  3. <ul>
  4. <li>Item 1</li>
  5. <li>Item 2</li>
  6. </ul>
  7. </div>

一个 React 组件不能返回多个React元素,但是单个的 JSX表达式 能够有多个子元素,所以如果你想一个组件包含多个子元素,你可以使用 div 来包装,如上。

JavaScript表达式

你也可以传递 JavaScript表达式 来作为子元素,将其包含在 {} 内。例如,以下的表达式是等价的:

  1. <MyComponent>foo</MyComponent>
  2. <MyComponent>{'foo'}</MyComponent>

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

  1. function Item(props) {
  2. return <li>{props.message}</li>;
  3. }
  4. function TodoList() {
  5. const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  6. return (
  7. <ul>
  8. {todos.map((message) => <Item key={message} message={message} />)}
  9. </ul>
  10. );
  11. }

JavaScript表达式也可以和其他类型的子元素组合。通常用于替代字符串模板:

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

函数作为子元素

通常,JSX中的JavaScript表达式将会被计算为字符串,React元素或者是这些内容的一个列表。然而,props.children 就像其他属性一样工作,它可以传递任何类型的数据,而不仅仅是React知道如何渲染的类型。例如,如果你有一个自定义组件,你可以将它作为 props.children 进行回调:

  1. // Calls the children callback numTimes to produce a repeated component
  2. function Repeat(props) {
  3. let items = [];
  4. for (let i = 0; i < props.numTimes; i++) {
  5. items.push(props.children(i));
  6. }
  7. return <div>{items}</div>;
  8. }
  9. function ListOfTenThings() {
  10. return (
  11. <Repeat numTimes={10}>
  12. {(index) => <div key={index}>This is item {index} in the list</div>}
  13. </Repeat>
  14. );
  15. }

传递给自定义组件的子元素可以是任何东西,只要在该组件呈现之前被转换成React能够理解的东西。这种用法并不常见,但如果你想扩展JSX,它也是可以工作的。

布尔值,NULL和Undefined将被忽略

false, null, undefined, true 都是合法的子元素。它们根本不会被渲染。以下的JSX表达式都会渲染出同样的结果:

  1. <div />
  2. <div></div>
  3. <div>{false}</div>
  4. <div>{null}</div>
  5. <div>{undefined}</div>
  6. <div>{true}</div>

这有助于条件渲染其他React元素,以下JSX 当 showHeadertrue 时,才仅仅渲染 <Header />

  1. <div>
  2. {showHeader && <Header />}
  3. <Content />
  4. </div>

值得注意的是有一些 "falsy" values(一些JS中转换为false的值),如数字0,仍然会被React渲染。例如,以下代码不会像你预期的那样工作,当 props.messages 为空数组时,也会打印0出来:

  1. <div>
  2. {props.messages.length &&
  3. <MessageList messages={props.messages} />
  4. }
  5. </div>

想解决这个问题,确保 && 之前总是布尔值:

  1. <div>
  2. {props.messages.length > 0 &&
  3. <MessageList messages={props.messages} />
  4. }
  5. </div>

反之,如果你想渲染 false, true, null, undefined 等值,你可以先将它们转换为字符串:

  1. <div>
  2. My JavaScript variable is {String(myVariable)}.
  3. </div>

【译】高级指南-深入JSX的更多相关文章

  1. React高级指南

    高级指南 1.深入JSX: 从本质上讲,JSX 只是为 React.createElement(component, props, ...children) 函数提供的语法糖. 因为 JSX 被编译为 ...

  2. Linux网络设置高级指南

    from:http://www.oschina.net/question/23734_117144 Linux网络设置高级指南 本文面向的是被Linux复杂的有线无线网络架构弄得头昏脑胀:或者被网上半 ...

  3. React 高级指南小记

    接上篇,还是笔记,还是干货. 深入 JSX 如果使用 JSX 表达式 <Foo />,Foo 必须在范围内,因为这些标签被编译为对指定变量的直接引用. 由于 JSX 编译为对 React. ...

  4. HTML和CSS高级指南——定位详解

    本文由大漠根据Shay Howe的<An Adavnced Guide to HTML & CSS>第二课<Detailed Positioning>所译,整个译文带有 ...

  5. (译)快速指南:用UIViewPropertyAnimator做动画

    翻译自:QUICK GUIDE: ANIMATIONS WITH UIVIEWPROPERTYANIMATOR 译者:Haley_Wong iOS 10 带来了一大票有意思的新特性,像 UIViewP ...

  6. 【译】快速起步-JSX简介

    react version: 15.5.0 快速起步-JSX简介 思考这个变量申明: const element = <h1>Hello, world!</h1>; 这个有趣的 ...

  7. [译]Mongoose指南 - Schema

    定义schema 用mongoose的第一件事情就应该是定义schema. schema是什么呢? 它类似于关系数据库的表结构. var mongoose = require('mongoose'); ...

  8. [译]Mongoose指南 - Population

    MongoDB没有join, 但是有的时候我们需要引用其它collection的documents, 这个时候就需要populate了. 我们可以populate单个document, 多个docum ...

  9. [译]Mongoose指南 - Connection

    使用mongoose.connect()方法创建连接 mongoose.conect('mongodb://localhost/myapp'); 上面的代码是通过默认端口27017链接到mongodb ...

随机推荐

  1. 记一次nginx php配置的心路历程

    1.本来搞好了php的配置,想把目录下移一层 从 www.abc.com 变成 www.abc.com/wxapi ,由于我的真实文件目录比路由少了一层public 尝试了很多办法都不行 甚至想到了u ...

  2. [20171121]rman backup as copy 2.txt

    [20171121]rman backup as copy 2.txt --//昨天测试backup as copy ,备份时备份文件的文件头什么时候更新.是最后完成后还是顺序写入备份文件.--//我 ...

  3. C# MD5 加密

    public static string MD5Encrypt(string clearText) { string result = string.Empty; byte[] byteArray = ...

  4. win10下解压版mysql-8.0.12安装教程

    内容转载于:https://blog.csdn.net/hust_hqq/article/details/80572133 在他之上添加了一个:服务名无效的解决方法 1.官网下载安装包 网址:http ...

  5. 百度纯CSS生成菜单

    首页我们打看dreamweaver或其它编辑器,创建一个名为nav的导航菜单 <div class="nav"> <ul> <li><a ...

  6. 面转栅格之ERROR 999999:执行函数时出错

    今天进行矢量面转栅格的操作时,总是出现ERROR 999999:执行函数时出错,如下图所示: 刚开始以为是栅格保存的路径太长的问题,后来发现是矢量面的路径问题,我的矢量面是放在自建的图层组下面,如下图 ...

  7. k8s监控api调用

    k8s监控api调用 curl -s --cacert /etc/kubernetes/ssl/ca.pem -basic -u fengjian:fengjian --insecure -X GET ...

  8. pump模块的学习-metamask

    pump = require('pump') pump简介 https://github.com/terinjokes/gulp-uglify/blob/master/docs/why-use-pum ...

  9. java程序应为CRT登录时启动未设置编码,造成启动乱码

    1.以下提供CRT连接程序设置编码脚本,后缀为“.vbs” # $language = "VBScript"# $interface = "1.0" Sub M ...

  10. oracle dataguard主从切换

    前言: 众所周知DataGuard一般的切换分成两种,一种是系统正常的情况下的切换这种方式为:switchover是无损切换,不会丢失数据:另外一种方式属于灾难情况下的切换,这种情况下一般主库已经启动 ...