JSX 的使用

作用:
- 与 creatElement() 的区别
使用:

作用:

创建react元素

与 `creatElement()` 的区别

cerareElement()代码不够简洁不够直观用户体验不好
JSX 写法直观与HTML 相同学习的成本低提升开发效率

使用:

创建一个元素

const abc = (<div>hello</div>)
// 推荐使用()包裹JSX

注意:JSX 是EcmaScript 的扩展 ,不能在js代码中直接使用,需要使用Bable进行编译处理才可以使用
脚手架中已经有了该配置,无需手动配置

命名规范

在react中元素的属性使用驼峰命名法
特殊属性名

H5 名称	JSX名称
class	className
for	htmlFor
tabindex	tabIndex

使用js表达式

使用{}包裹js表达式

// 直接使用变量
const name = 'li'
const abc = <div> { name } </div>
// 直接输出字符串
const abc = <div> { 'li' } </div>
// 三元
const abc = <div> { 1<2?'小于':'大于' } </div>

{}中可以是任何合法的js表达式 , 不能在{} 中使用语句如:if for
JSX自身也是一个js表达式
除特殊情况(style属性)外对象不可以直接使用

JSX的条件渲染

条件渲染即根据不同的条件得到不同的JSX代码
if else方法

// 根据条件返回不同的JSX
const abc = ()=>{
    if(1>2){
      return <div>错</div>
  } else {
      return <div>对</div>
  }
}

三元表达式

1>2?(<div>对</div>):(<div>错</div>)

逻辑运算符 `&&`

// 与其他方法不同&&只能控制是否输出元素
1>2&&(<div>错</div>)

列表渲染

在JSX中使用数组的map方法进行列表渲染

const arr = [{name:'laoli',id:1},{name:'laowang',id:2}]
// key 必须存在且不重复
const abc = <ul>{arr.map(it=>(<li key={it.id}>{it.name}</li>)) }</ul>

样式处理

行内样式 style

// style 属性内包裹一个对象 
// css以键值对方式书写 注意驼峰命名
const abc = ( <div style={ {color:'red',background:'$753'} }></div> )

**类样式 **`**className**`

// 使用className作为类名
const abc = ( <div className="title"></div> )
// 在css文件中书写对应的类样式 这里对类样式进行了省略
在当前的js文件在引入css文件
imoirt './XXX.css'  // css文件路径

作用:

与 creatElement() 的区别