jsx语法了解

简介

jsx是javascript的一种语法扩展，主要用于在React中定义和渲染用户界面。它允许开发者在js代码中编写html的代码。

语法特点

插值表达式

在template中使用{{}}，jsx中使用{}
<div>{ name }</div>

v-html指令

通过变量的形式书写html结构
const htmlStr = <span>hello</span>
<div>{ htmlStr }</div>

条件渲染if...else

const ifRender = (val) => {
	if (val === 1) {
		return <div class="success">是</div>
	} else {
		return <div class="error">否</div>
	}
}

&&运算符

{ isError && <div>校验失败</div> }
{ !isError && <div>校验成功</div> }

||运算符

可以渲染出计算后的html结构

const dom1 = <h1>1111</h1>
const dom2 = <h1>2222</h1>
<div>{ dom1 || dom2 }</div>

三目运算符

<div>{ isShowDom1 ? dom1 : dom2 } </div>

列表渲染

<div class="listWrap">
 {
   dataList.map(item => (<div class="listItem" key={ item.id }>{ item.name }</div>)) 
	
 }
</div>

事件绑定

on+事件名称，建议驼峰法
<button onClick={ clickFn }></button>

使用修饰符【.stop，.prevent】等时
<button onClick={withModifiers(clickFn, ['prevent'])}></button>

传递参数时需要使用箭头函数，不能像在template中使用clickFn(params),会当成调用
<button onClick={ (params) => clickFn(params)}></button>

双向绑定v-model

<CustomComp v-model={searchInput} />

自定义名称绑定
<CustomComp v-model={[searchInput, 'customTitle']} />

插槽slot

<div v-slots={ { slotName: <span>1111</span> } }></div>

v-bind场景

const imgSrc = ''
<img src={imgSrc} />

应用示例

html代码：
<component :is="statusRender" v-bind="{ status: 1 }" />

jsx代码
const statusRender = (param: any) => {
  if (param.status === 1) {
    return <div>通过</div>
  } else {
    return <div>拒绝</div>
  }
 }