JSX语法

什么是JSX

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

JSX中使用JavaScript表达式

1.基本用法

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

  let name = '被子'
  const dv = (<div>你好，我是:{name}</div>)
  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 = <div style={{color:'red'}}></div>

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

<!-- 导入react、react-dom、babel 三个js文件 -->
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules//react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>

<div id="app"></div>

<script type="text/babel">
    // 用JSX方式创建React元素
    let H1 = <h1>Hello React</h1>
    // 渲染React元素到页面中
    ReactDOM.render(H1,document.getElementById('app'))
</script>

JSX中的条件渲染

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

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

}


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


export default JSX

JSX中的循环渲染

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

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

function JSX() {
    return (
        <ul>
        {books.map((item) => (
            <li key={item}>{item}</li>
        ))}
      </ul>
  )
}

JSX中样式处理

1.行内样式处理 - style

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

function JSX() {
    return (
        <ul>
        {books.map((item) => (
            <li style={{color:'red',listStyle:'none'}} key={item}>{item}</li>
        ))}
      </ul>
  )
}

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

import './index.css'

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

function JSX() {
    return (
        <ul>
        {books.map((item) => (
            <li className='color' key={item}>{item}</li>
        ))}
      </ul>
  )
}