共计 4943 个字符，预计需要花费 13 分钟才能阅读完成。
前言
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 等全栈开发畛域都有较为深的造诣。入住 Segmentfault，心愿可能更多的结识 Web 开发畛域的同仁，将 Web 开发鼎力的进行遍及。同时也违心与大家进行深刻的技术研究和商业单干。
