JSX语法

什么是JSX

JSX是JavaScript XML的简写，表示在JavaScript代码中编写HTML格式代码
优势：声明式语法更加简洁，与HTML结构相同，提高开发效率

JSX中使用JavaScript表达式

1.基本用法

• 语法：{JavaScript表达式}
• 表达式中的数据存储在JS变量中

  let name = '被子'
  const dv = (
你好，我是:{name}
)
  ReactDOM.render(dv,document.getElementById("app"))

2. 使用注意点

• 单大括号中正常可以是任意的JavaScript表达式
  正确：{1}、{1+1}、{'a'}、{sayHi()}、{另外一个JSX}、{ 1>0 ?'真':'假' }
• 单大括号中不能出现语句(例如：if/for等)
  错误：{if(1>0){}}、{for(let i=0;i<10;i++){}}
• JS对象一般只会出现在style属性中
  错误：{{name:'rose'}}
  正确：conts Home =

2.JSX创建一个H1元素渲染到页面上

JSX中的条件渲染

• 如果用户登录了显示欢迎登录，未登录显示请登录

let islogin = false;
function JSX(){
// if判断
if(islogin){ 
     return (
欢迎登录
); 
    }   
return (
请登录
);

}


// 三元表达式
// function JSX() {
   // return (
{islogin?'未登录':'登录成功'}
)
//}


export default JSX

JSX中的循环渲染

• 在页面上生成一个前端技术书籍列表，就需要用到循环渲染
  语法：{ 数组变量.map( item=>( <标签>{item} ) ) }
  注意：map方法前面通常是数组，map方法的箭头函数体内容放到小括

let books = ["DOM编程艺术", "JS高级编程", "React实战"];

function JSX() {
    return (
        

        {books.map((item) => (
            
{item}
        ))}
      
  )
}

JSX中样式处理

1.行内样式处理 - style

let books = ["DOM编程艺术", "JS高级编程", "React实战"];

function JSX() {
    return (
        

        {books.map((item) => (
            
{item}
        ))}
      
  )
}

2.类名样式处理 - className
需要使用 import '样式文件路径/样式文件名称.css'导入样式文件 ,title类在xxx.css文件中定义好
JSX中给元素设置css类名是className而非class，因为class是关键字

import './index.css'

let books = ["DOM编程艺术", "JS高级编程", "React实战"];

function JSX() {
    return (
        

        {books.map((item) => (
            
{item}
        ))}
      
  )
}