「最简教程」每天一篇，轻松搞定 React-JSX篇

看本篇之前建议先看概述篇。
————致力于最简单的前端教程，每天一篇文章，轻松进阶前端

JSX概念

jsx简单的理解就是在js里写html。

它是react对js的语法扩展，虽然长的跟html一样，但实际并不是，你可以把它看出一个对象（编译后才是对象）。

比如上篇的例子，直接在js里定义了一个变量，值是一个html标签：

const hello=<h1>Hello, world!</h1>;

JSX的使用

使用jsx前需要在文件中导入 React:

import React from 'react';

1. 表达式

jsx不仅仅是可以在js写html，html里也可以嵌套表达式，规定嵌套在{}里面。

let name='world';
const hello=<h1>Hello, {name}!</h1>;
//<h1>Hello, world!</h1>

2. 属性

jsx属性就像html里的属性一样，可以是原有的，也可以自定义属性。

const link=<a url='www.toutiao.com' urlName=''></a>

上面例子的url属性就是原来html的属性，urlName是我们自己添加的属性。

3. 嵌套

jsx最外层只有一个标签，但内部可以嵌套多层。

const element=(
 <div>
 <h1>Hello!</h1>
 <h2>Good to see you here.</h2>
 </div>
);

JSX注意事项

1. 使用 () 包裹html标签

上面的例子，div外层用括号包裹，主要为了解决自动加分号可能引入的bug

2. jsx内写注释

类似html的注释，但是需要放在{}里面

const element=(
 <div> 
 {/*注释...*/}
 <h1>Hello!</h1>
 <h2>Good to see you here.</h2>
 </div>
);

JSX优点

可复用，html模块化，可以复制给js变量，自然可以复用
防止xss攻击
React DOM在渲染前会把内容转换为字符串，所以可以防止xss攻击（对xss有兴趣的以后会单独讲）
标签语义化
比如上面的element例子，可以把它当做一个标签使用，不限于html里的标签，div，p等等

JSX原理（了解）

实际上JSX是js（es6）的语法糖，JSX会在编译时转被 React.createElement() 调用，生成一个普通的js对象，下面两种写法完全等价：

const element=(
 <h1 className="greeting">
 Hello, world!
 </h1>
 );

const element=React.createElement(
 'h1',
 {className: 'greeting'},
 'Hello, world!'
 );

上手试一试吧

按照上面讲的例子，进入创建的项目代码目录，找到App.js，如下：

项目目录截图

然后把App.js中render函数里的内容修改为本篇文章的代码：

修改后截图

让我们切到浏览器看看效果：

浏览器截图

本篇文章到此结束，下篇具体说说JSX的属性。

【提示，关注后就能收到文章更新推送了】

【前方雾大，关注一下不迷路=。=】

【html】【css】【html】【css】【html】【javascript】【html】【javascript】【javacsript】【css】【javascript】【css】【javascript】

击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

从写React项目开始，我们熟悉了一种语法，叫JSX，它很好的将逻辑和模板融合在一起。当然，有一点我们应该很清楚，在React项目开发的时候，我们可以使用JSX来编写代码，也可以使用纯JavaScript来编写代码，这样的话，即使不学JSX也可以正常开发React项目。

然而，facebook官方推荐我们使用JSX来写React代码。为什么呢？下面从四个方面介绍，带你学会使用JSX。

一、JSX如何区分React组件和HTML标签

HTML类型的标签第一个字母用小写来表示，React组件标签第一个字母用大写来表示。

比如：

上面代码是一个HTML类型的标签定义，需要知道两点：

第一，当一个标签里面内容为空的时候，可以直接使用自闭和标签;

第二，因为JSX本身是JavaScript语法，所以一些JavaScript中的保留字要用其他的方式书写，就像上面class要写成className。

这里写的是一个React组件，注意名字第一个字母大写。

二、JSX中JavaScript表达式如何定义

标签对标签（或组件名），{}对JS代码，无属性默认为true

什么意思了？就是说在JSX语法中，当遇到标签的时候就解释成组件或HTML标签，当遇到{}包裹的时候就当成JavaScript代码来执行。

比如：

上面代码中，{}内会当表达式处理，isLoggIn为true时输出组件<Nav/>否则输出<LoginForm/>

当省略一个属性的值的时候，如<Nav isDisable/>。JSX会自动把它的值认为是true（isDisable=true）。

三、JSX注释如何写

在子组件中写注释的时候要用{}

比如：

四、多属性如何定义

用“三点”操作符来简化多个属性的编写。举个例子：

显然，上面这种写法，当出现更多属性的时候，会显得很难看。下面看一个更优雅的写法。

言

React框架推荐使用的DOM语法格式为JSX语法，属于一种JavaScript扩展，React使用JSX来描述用户界面。我们可以粗略的认为JSX是JavaScript和HTML的结合，但是在实际的使用过程中还有一定的细节区别。本文就带领大家系统的学习JSX语法的格式。

一、JSX语法的基本用法

1、使用变量定义JSX元素

const element=<div>你好，React！</div>;

这里需要注意，上述代码不是JavaScript字符串，所以没有用任何引号引住；也不是HTML代码。而是JSX语法格式。

React应用的最小单位是“元素”，JSX语法格式就是React推荐用来声明元素的。

2、使用变量定义嵌套的JSX元素

对于相互嵌套的JSX元素，JSX语法推荐使用()扩住。

const ulElement=(
  <ul>
    <li>第一名</li>
    <li>第二名</li>
  </ul>
)

使用()扩住嵌套的JSX元素，让格式更加清晰。从实际的操作来看，不书写()也是可以的。

3、在JSX元素中使用变量

在JSX元素中使用变量必须使用{}扩住，变量可以用于JSX元素的内容中，也可以用于JSX元素的HTML属性取值上。

let name='张三';
const strongElement=<strong>你好，{name}</strong>

let url='https://www.baidu.com';
const link=<a href={url}>百度一下</a>

4、在JSX元素中调用函数

对于具有return返回值的函数，JSX元素可以像使用变量一样，利用{}扩住对函数进行调用。

function getSum(a,b){
  return a+b;
}
let a=10,b=20;
const sum=<div>{a}+{b}={getSum(a,b)}</div>

上述几种情况中举的案例元素（element、ulEelement、strongElement、link、sum）都可以直接用在ReactDOM。render()方法的第一个参数中，充当向第二个参数所指的DOM节点中放入的元素。以sum为例，代码如下所示。

ReactDOM.render(
    sum,
    document.querySelector('#app')
);

二、JSX元素的语法规定

JSX元素在书写时还要注意下列语法规定：

JSX元素必须具备一个唯一的根节点。
JSX元素中标记的class属性取值必须使用className属性。
JSX元素中标记的style属性取值必须用两个大括号扩住，即style={{}}。
JSX代码中标记内部的注释必须用{}扩住，标记外部的注释不能用{}扩住。
JSX代码中的标记必须成对或者有结尾标识。

请大家仔细阅读下列代码：

const element=(
  /*一个完整的JSX元素：本注释没有在任何标记内部，所以不用{}扩住*/
  <div>       {/*唯一的根节点：本注释在标记内部，必须用{}扩住*/}
    <div className="top">   {/*className属性的使用*/}
      {/*style属性的使用必须是双大括号*/}
      <div style={{width:'1200px',height:'40px',backgroundColor:'#3385ff'}}>
        欢迎学习React框架。
        <img src=”images/01.jpg” />    {/*标记必须有结尾标识*/}
      </div>
    </div>
  </div>
);
ReactDOM.render(
  element,
  document.querySelector('#app')
);

上述代码在浏览器中运行，可以从开发人员工具的Elements选项卡中看到下列如图所示的结构。

从图中可以看得出，id属性取值为app的div和class属性取值为top的div之间，有一个空的div。这是由于为了满足JSX元素必须具备一个唯一的根节点，而设置的最外层的div标记对。为了不让最外层的根节点显示在DOM结构中，React建议使用React.Fragment作为所有JSX元素最外层的根节点。代码改为如下格式。

const element=(
  /*一个完整的JSX元素：本注释没有在任何标记内部，所以不用{}扩住*/
  <React.Fragment>       {/*唯一的根节点：本注释在标记内部，必须用{}扩住*/}
    <div className="top">   {/*className属性的使用*/}
      {/*style属性的使用必须是双大括号*/}
      <div style={{width:'1200px',height:'40px',backgroundColor:'#3385ff'}}>
        欢迎学习React框架。
        <img src=”images/01.jpg” />    {/*标记必须有结尾标识*/}
      </div>
    </div>
  </ React.Fragment >
);

这时再看开发人员工具的Elements选项卡，React.Fragment标记位置是没有任何标记对的。

三、在JSX格式中遍历数组

在JSX格式中遍历数组不能使用for循环，只能使用ES5为数组提供的各种方法。下面的例子展示了用数组的map()方法来遍历数组的功能实现。

例1：实现页面导航条的JSX格式。

let navText=['首页','产品展示','技术展望','视频会议','金牌团队','关于我们'];
let navLink=['index.html','product.html','technology.html','videol.html','team.html','about.html'];
const nav=(
  <React.Fragment>
    <div className="top">
      <div className="topContent">
        <ul>
          {
            navText.map((item,index)=>{
              return <li key={index}><a href={navLink[index]}>{item}</a></li>
            })
          }
        </ul>
      </div>
    </div>
  </React.Fragment>
);

从上述代码中可以看出下列有关JavaScript语言在JSX语法中的规范：

JavaScript部分在JSX语法中必须使用{}扩住。
数组在遍历生成li标记时，必须添加key属性，并设置为数组的索引值。

例2：有一个JSON数组，每个元素有两个属性：isShow和file。其中isShow取值为逻辑值，file取值为表示图片路径的字符串。当isShow取值为true时，file指定的图片要显示在页面中；当isShow取值为false时，file指定的图片不显示在页面中。

let picture=[
  {isShow:true,file:'images/01.jpg'},
  {isShow:true,file:'images/02.jpg'},
  {isShow:false,file:'images/03.jpg'},
  {isShow:true,file:'images/04.jpg'},
  {isShow:true,file:'images/05.jpg'}
];
const img=(
  <React.Fragment>
    <h2>图片欣赏</h2>
    <div className="picture">
      {
        picture.filter((item,index)=>{
          return item.isShow
        }).map((item,index)=>{
          return <img src={item.file} key={index} />
        })
      }
    </div>
  </React.Fragment>
);

上述代码中，使用数组的filter()方法对picture数组进行筛选，筛选条件是isShow取值为true。然后再对筛选出来的数组元素使用map()方法进行遍历，以用来在页面中显示图片。

四、在JSX格式中使用if语句

在JSX格式中是不能直接使用JavaScript的if语句的，我们通过下列五种方式来为大家讲解可行的方法。

例：设置一个变量flag。规定当flag=true时，页面中显示一个类名为box的div标记；当flag=false时，页面中显示一个类名为fox的div标记。

1、使用三元运算符在JSX中实现判定

JavaScript提供的三元运算符（? :）也被称为“三目运算符”。该运算符适合分为两种情况的分支判定。

let flag=true;
const element=(
  <React.Fragment>
    {
      flag?
      <div className="box">
        我是box元素......
      </div>
      :
      <div className="fox">
        我是fox元素
      </div>
  }
  </React.Fragment>
);

2、使用逻辑与运算符的短路原理实现判定

JavaScript提供的逻辑与运算符（&&）的短路原理规定：当&&运算的左侧为false时，右侧不予计算。该运算符适合多分支的判定。

let flag=true;
const element=(
  <React.Fragment>
    {flag && <div className="box">
      我是box元素......
    </div>}
    {!flag && <div className="fox">
      我是fox元素
    </div>}
  </React.Fragment>
);

上述代码中，因为flag变量的取值为true，所以!flag的取值为false，则!flag &&右侧的元素不再计算，也就不会被渲染出来。

3、在JSX格式以外借助变量使用if语句完成判定

既然JSX格式不允许直接使用if语句，那我们就不在JSX格式中使用。我们可以在JSX格式以外的区域使用if语句。

let flag=false;
let target;
if(flag){
  target=(
    <div className="box">
      我是box元素......
    </div>
  )
}else{
  target=(
    <div className="fox">
      我是fox元素
    </div>
  )
}
const element=(
  <React.Fragment>
    {target}
  </React.Fragment>
);

上述代码中定义了一个名为target的变量，通过在JSX格式以外进行if语句的判定，让target变量获得不同的JSX元素，最终在React.Fragment标记对中使用{target}引用了判定后的结果。

4、在JSX格式以外借助函数使用if语句完成判定

我们也可以在JSX格式以外的区域声明一个函数，在函数体总使用if语句进行判定，并最终将需要渲染的JSX格式利用return语句返回。

let flag=true;
function getTarget(){
  if(flag){
    return (
      <div className="box">
        我是box元素......
      </div>
    )
  }else{
    return (
      <div className="fox">
        我是fox元素
      </div>
    )
  }
}
const element=(
  <React.Fragment>
    {getTarget()}
  </React.Fragment>
);

上述代码中定义了一个名为getTarget的函数，该函数内部使用if判定flag变量的值，然后利用return语句将需要的JSX元素返回出去。在React.Fragment标记对中只需要使用{getTarget()}调用该函数即可。

总结

本文是React系列教程的第二篇文章，主要为大家讲解了React框架中JSX语法的书写格式。系统的学会了JSX语法的书写格式，对于编写复杂的React项目有很大的帮助。明天会为大家系统的讲解React组件的使用方法。

关于作者

小海前端，具有18年Web项目开发和前后台培训经验，在前端领域著有较为系统的培训教材，对Vue.js、微信小程序开发、uniApp、React等全栈开发领域都有较为深的造诣。入住?，希望能够更多的结识Web开发领域的同仁，将Web开发大力的进行普及。同时也愿意与大家进行深入的技术研讨和商业合作。

在线咨询

上一篇：用EXCEL进行跨行排序的两种实用方法
下一篇：JavaScript编码的一些日常习惯

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商