JSX使用

3.1 JSX的概述

JSX是JavaScript XML 的简写，表示在JavaScript代码中写HTML格式的代码

优势：声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率

3.2 为什么在脚手架中可以使用JSX语法

• JSX 不是标准的ECMAScript语法，它是ECMAScript的语法拓展

• 需要使用babel编译处理后，才能在浏览器环境中使用

• create-react-app脚手架中已经默认有该配置，无需手动配置

• 编译JSX语法的包： @bable/preset-reac

3.3 JSX语法

在这里可以将render( )方法的第一个参数，赋值一个变量。如下代码所示：

import React from 'react'
import ReactDom from 'react-dom'
let msg=<h1> 你好 </h1>
ReactDom.render(msg,document.getElementById('root'));

如果这里想在<h1>标签中嵌入其它的标签，怎样实现呢？

这一点与普通的html标签嵌入的写法是一样的，如下所示：

let msg=<h1> 你好<span>张三</span> </h1>

3.3.1 嵌入JS表达式

在上面的案例中，直接在h1标签中嵌入了<span>标签，并且在标签中直接写入了‘张三’这个用户名，但是如果‘张三’这个用户名是来自变量中，应该怎样进行处理呢？

如下代码所示：

let userName='张三';
let msg=<h1> 你好<span>{userName}</span> </h1>

这就是在JSX中嵌入JS表达式，通过上面的案例可以看出对应的基本语法如下：

{JavaScript表达式}

下面看一下对应的演示：

​
let msg=<div>
    <p>{1}</p>
    <p>{'a'}</p>
    <p>{1+3}</p>
 
    </div>
ReactDom.render(msg,document.getElementById('root'));

但是，注意在JSX中是不能使用if和for语句的。

如下是错误的：

  <p>{if(true){}}</p>

既然{ }中写的是JavaScript表达式，那么也可以在{ }中添加函数。

function fullName(user){
    return user.firstName+user.lastName;
}
let msg=<h1> 你好<span>{fullName({firstName:'li',lastName:'si'})}</span> </h1>

3.3.2 条件渲染

根据不同的条件来渲染不同的JSX结构

let isResult=true;
function showUserName(user){
    if(isResult){
        return user.firstName+user.lastName;
    }
    return user.firstName;
}
let msg=<h1> 你好<span>{showUserName({firstName:'li',lastName:'si'})}</span> </h1>

以上的代码根据isResult变量的取值展示不同的内容。

3.3.3 列表渲染

如果需要渲染一组数据，应该怎样进行处理呢？

在这里可以使用map( )方法来完成。

let users=[{id:1,userName:'张三'},{id:2,userName:'王五'},{id:3,userName:'李四'}]
let msg=<h1>你好{
     users.map(function(userInfo){
         return <span key={userInfo.id}>{userInfo.userName}</span>
     })
​
}</h1>
ReactDom.render(msg,document.getElementById('root'));

注意：在渲染列表的时候需要添加key属性，并且key属性的值要保证唯一，也就是map方法遍历谁，就给谁添加key属性。

这里，在大括号中编写js代码，在js代码中可以编写html代码，html代码中需要js代码时，也需要添加大括号。

下面把程序修改成如下的情况：

let users=[{id:1,userName:'张三'},{id:2,userName:''},{id:3,userName:'李四'}]
let msg=<h1>你好{
     users.map(function(userInfo){
         return <span key={userInfo.id}>{userInfo.userName}</span>
     })
​
}</h1>
ReactDom.render(msg,document.getElementById('root'));

在上面的代码中，将id为2的用户名修改成了空字符串，然后运行该程序，通过审查元素发现，还会出现一个空的span标签，那么这就没有意义了，现在如果出现这种情况，要求不显示 空的span标签，那么应该怎样处理呢？

let users=[{id:1,userName:'张三'},{id:2,userName:''},{id:3,userName:'李四'}]
let msg=<h1>你好{
     users.map(function(userInfo){
         return userInfo.userName.length>0? <span key={userInfo.id}>{userInfo.userName}</span>:null
     })
​
}</h1>
ReactDom.render(msg,document.getElementById('root'));

对遍历出来的userInfo中的userName属性判断其对应的长度，如果有长度值，则显示span标签，否则显示null

学IT，上博学谷