本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一关于JXL

1.1 JXL简介

JXL: javaScipt xml的简写, 在javaScipt中写xml(html)格式的代码
JXL 是 react的核心内容

1.2 为什么要用JXL?

答 : 因为React.createElement有如下问题

繁琐、不简洁
不直观、无法一眼看出描述的结构
不优雅,用户体验不爽

1.3 JXL优点

声明式的语法更加直观
与html结构相同,降低了学习成本
提升开发效率

二使用JXL

2.1 JXL的基础使用

1 使用步骤

使用jxl语法创建react元素
使用ReactDOM.render渲染

src-index.js

//导入react
import React from "react";
import ReactDOM from "react-dom";
 
//1 使用jxl创建react元素
const title = <h1> hello jsx<span>你好</span></h1>
 
//2 渲染react
//参数1:要渲染的元素  参数2:要渲染到哪里去(挂载点)
ReactDOM.render(title,document.getElementById("root"));

预览

2 JXL使用注意点

react元素的属性名使用驼峰命名法
注意特殊属性名

class → className

for → htmlFor

tabindex → tableIndex

没有子节点的react元素可以使用单标签结束</>
推荐使用()包裹JXL

2.2 在JXL中嵌入JS表达式

问: 为什么要嵌入JS表达式?

答: 因为数据存储在js中

问: 如何在JXL中嵌入JS表达式?

答: 使用花括号{}

1 基础使用

代码如下:

//导入react
import React from "react";
import ReactDOM from "react-dom";
 
//1 使用jxl创建react元素
const name = "小名"
const age = "9"
const title = (<h1 className="title"> hello jsx 我是{name},我今年{age}岁</h1>)
 
//2 渲染react
//参数1:要渲染的元素  参数2:要渲染到哪里去(挂载点)
ReactDOM.render(title, document.getElementById("root"));

预览

2 其他使用

花括号{}里可以使用任意的javaScipt表达式
JXL自身也是javaScipt表达式

{}里可以写数字、字符串

{}可以参与数字的运算、可以写三元表达式

{}可以调用方法,输出该方法的返回值到页面

{}里也可以使用JXL

代码如下

//导入react
import React from "react";
import ReactDOM from "react-dom";
 
//1 使用jxl创建react元素
const name = "小名"
const age = "9"
//{}可以使用任意的javaScipt表达式
const sayhello = ()=> "hello world"
const div = (<div>我是div</div>)
const title = (
    <h1 className="title"> hello jsx 我是{name},我今年{age}岁
        <p>{1}</p>
        <p>{'2'}</p>
        <p>{1 + 2}</p>
        <p>{3 > 2 ? "true" : "false"}</p>
        <p>{sayhello()}</p>
        {div}
 
    </h1>
 
)
 
 
//2 渲染react
//参数1:要渲染的元素  参数2:要渲染到哪里去(挂载点)
ReactDOM.render(title, document.getElementById("root"));

预览

3 关于箭头函数

形式: ()=>{}

箭头函数和普通函数的区别:

默认return, 所以return关键字可以省略
没有this , this指向上一级的this
只有一个参数的情况下可以省略小括号(),只有一条返回语句的情况下可以省略花括号{}
若写了return关键字,就需要写{},只有一条返回语句时,return和{}都可以省略

示例

() => <div>这是一个箭头函数组件</div>

2.3 JXL的条件渲染

条件渲染:根据不同条件渲染不同的JXL结构

条件渲染的不同方式:

1 if else

//导入react
import React from "react";
import ReactDOM from "react-dom";
 
 
const flag = true
const loadData = () => {
    if (flag) {
        return <div>正在加载请稍后..</div>
    }
    return <div>hello pig</div>
}
 
const title = (
    <h1>
        {loadData()}
    </h1>
 
)
 
 
//渲染react
ReactDOM.render(title, document.getElementById("root"));

预览(flag = true的情况)

预览(flag 改成 false)

2 三元运算符

//也可以用三元运算符来表示
const loadData = () =>{
    return flag?<div>正在加载请稍后..</div>:<div>hello pig</div>
}

3 逻辑与

//逻辑与运算符 → 适合要么展示要么隐藏的情况
const loadData = () =>{
    return flag&&(<div>正在加载请稍后..</div>)
}

当flag为true的情况下,才会走到&&之后

当flag为false的情况下,判断在&&之前已经结束,不会走到&&之后,不会加载内容

2.4 JXL的列表渲染

渲染一组数据,使用数组的map()方法
map遍历谁,就给谁添加key属性
注意key保持唯一

代码如下

//导入react
import React from "react";
import ReactDOM from "react-dom";
 
 
const food = [
    {
        id: 1,
        name: "apple"
    },
    {
        id: 2,
        name: "melon"
    },
    {
        id: 3,
        name: "berry"
    }
]
 
 
//map 表示遍历
//map 遍历谁,就给谁添加key属性,此处遍历<li>
const list = (
    <ul>
        {food.map(
            item => <li key={item.id}>{item.name}</li>
        )}
    </ul>
 
)
 
 
// 渲染react
//参数1:要渲染的元素  参数2:要渲染到哪里去(挂载点)
ReactDOM.render(list, document.getElementById("root"));

预览

2.5 JXL的样式

两种方式

1 行内样式style

外层{} 表示要在JXL中嵌入表达式,内层{}表示一个对象

//导入react
import React from "react";
import ReactDOM from "react-dom";
 
 
const title = (
    //行内样式style
    //外层{} 表示要在JXL中嵌入表达式,内层{}表示一个对象
    <h1 style={{
        color:'yellow',
        backgroundColor:'blue'
    }}>
        hello girl
    </h1>)
 
 
 
// 渲染react
//参数1:要渲染的元素  参数2:要渲染到哪里去(挂载点)
ReactDOM.render(title, document.getElementById("root"));

预览

2 类名 className (推荐)

index.js

//导入react
import React from "react";
import ReactDOM from "react-dom";
 
//引入css
import "./index.css"
 
const title = (
   // 使用className
    <h1 className="red" >
        hello girl
    </h1>)
 
 
// 渲染react
//参数1:要渲染的元素  参数2:要渲染到哪里去(挂载点)
ReactDOM.render(title, document.getElementById("root"));

index.css

.red{
  color:red;
  text-align: center;
}

预览

react JXL介绍、JXL使用

一 关于JXL