JSX语法（JavaScritpXML）

JSX用于生成虚拟DOM对象，语法要求：

只能有一个根标签，里面所有的标签必须闭合
{}里只能写js表达式，不能写js语句：

表达式：一个表达式会产生一个值，可以放在任何需要值的地方，可以使用let/const一个变量来接收。

js语句（代码）：如 if、for、switch(){ case:xxx }

一、嵌入JS表达式

{JavaScritp表达式}

let content = '插入的内容' //存储在js中的数据
let h1 = ( <h1>{content}</h1> )

js表达式如a，a+b，functionName(param)函数调用表达式，array.map()函数，function test () {} 定义函数等等，都可以用一个变量进行接收。也可以写 { console.log(1) }

//array.map()是有返回值的
let arr = [1,2,3,4]
let result = arr.map((num) => {
    return num+1
})
console.log(result) //[2,3,4,5]

//定义函数，其本身也是返回值
const x = function test(){
    console.log('1')
}

console.log(x)
/* 这个函数本身
test(){
    console.log('1')
}
*/

只要是合法的js表达式(如各种数据类型）都可以进行嵌入
JSX自身也是js表达式
js中的对象不能嵌入，一般只会出现在style属性中

import React from 'react'
import ReactDOM from 'react-dom'

// 函数调用表达式
const sayHi = () => 'Hi~' //函数调用后返回字符串Hi~

const dv = <div>我是一个div</div> //dv是JSX

const title = (
  <h1>
    <p>{1}</p>
    <p>{'a'}</p>
    <p>{1 + 7}</p>
    <p>{3 > 5 ? '大于' : '小于等于'}</p>
    <p>{sayHi()}</p>
    {dv} {/*JSX自身也是js表达式，也可以嵌入到JSX中*/}

    {/* 以下为错误演示:
    注意——注释是js中的，嵌入到jsx中的注释也需要用花括号括起来 */}
    {/* <p>{ {a: '6'} }</p> 花括号里一般不写对象，除非在style属性中*/}
    {/* { if (true) {} } 花括号中不能出现语句 */}
    {/* { for (var i = 0; i < 10; i++) {} } 花括号中不能出现语句*/}
  </h1>
)

// 渲染
ReactDOM.render(title, document.getElementById('root'))

二、条件渲染

用 if/else 或三元运算符或逻辑与运算符来实现

import React from 'react'
import ReactDOM from 'react-dom'

const isLoading = false

// if-else
// const loadData = () => {
//   if (isLoading) {
//     return <div>loading...</div>
//   }
//   return <div>数据加载完成，此处显示加载后的数据</div>
// }

// 三元表达式：
// const loadData = () => {
//   return isLoading ? (<div>loading...</div>) : (<div>数据加载完成，此处显示加载后的数据</div>)
// }

// 逻辑与运算符：
const loadData = () => {
  return isLoading && (<div>loading...</div>)
}

const title = (
  <h1>
    条件渲染：
    {loadData()}  {/*把函数调用的返回值嵌入JSX*/}
  </h1>
)
ReactDOM.render(title, document.getElementById('root'))

三、列表渲染

用数组的 map () 方法，返回一个新数组，数组中的元素为原始数组元素按序依次调用函数处理后的值。

arr.map()

渲染列表的时候需要添加key属性，key属性的值要保证唯一

map()遍历谁，就给谁添加key属性

尽量避免使用（可变化的）索引号作为key，比如map的第二个参数index，不建议将其作为key值

//数组可以作为 react的合法节点进行遍历，所以下例不报错。但对象不能
let arr = [<li>aaa</li>, <li>bbb</li>]
const list = (
  <ul>
      {arr}
  </ul>
)

可以把原来的纯数据['aaa', 'bbb']加工成带有标签的数据，等价于：

//增加一个id属性作为key值
let arr = [{
    id:1,
    name:'aaa'
},{
    id:2,
    name:'bbb'
}]
//创建虚拟DOM
const list = (
  <ul>
    {arr.map(item => <li key={item.id}> {item.name} </li>)}
  </ul>
)
//渲染虚拟DOM
ReactDOM.render(list,document.getElementById('root'))

四、添加样式

行内样式style

在标签里以style={{key=value}}的方式嵌入（以对象的形式）

<li key={item.id} style={{'color': 'red',"backgroundColor": 'pink'}}>{item.name}</li>

类名用className

创建CSS文件编写样式代码

.title {
    text-align: center
}

在js中进行引入，设置类名即可

import React from 'react'
import ReactDOM from 'react-dom'
// 引入css
import './css/index.css'

const list = (
  <h1 className="title" style={{ color: 'red', backgroundColor: 'skyblue' }}>
    JSX的样式处理
  </h1>
)
// 渲染
ReactDOM.render(list, document.getElementById('root'))

JSX表示在JS代码中写HTML结构，是React声明式的体现（只需要描述页面是什么样子）

（React基础）JSX语法