前言
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开发鼎力的进行遍及。同时也违心与大家进行深刻的技术研究和商业单干。