【笔记】JSX学习笔记

前言

JSX (JavaScript XML, formally JavaScript Syntax eXtension) is an XML-like extension to the JavaScript language syntax. Initially created by Facebook for use with React, JSX has been adopted by multiple web frameworks.:5:11 Being a syntactic sugar, JSX is generally transpiled into nested JavaScript function calls structurally similar to the original JSX.（维基百科）

React中的JSX学习笔记

编译jsx文件

通过脚手架编译jsx文件

下载依赖

npm install --save-dev @babel/core @babel/cli @babel/preset-react

创建babel配置文件

• 创建babel.config.js文件或者.babelrc文件作为babel的配置文件

.babelrc

{
  "presets": ["@babel/preset-react"]
}

编译jsx文件

npx babel <file>.jsx -o <file>.js

直接引入核心js文件

• 引入babel核心js文件到html文件，实现自动编译当前html文件内的jsx语法代码

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

<script type="text/babel">
  let dom = <div>文本内容</div>;
</script>

用变量存储HTML模板

let dom = <div id="值">文本内容</div>;

插值表达式（胡子语法）

将变量值作为HTML文本

• 插值表达式（胡子语法）{}可以在HTML中插入JS表达式

let dom = <div>{JS表达式}</div>;

将变量值作为属性值

• 如果为标签的属性插值，则不能出现""，如果出现""则表示的是普通字符串而非插值

let dom = <div id=值></div>;

• 如果属性名是class，需要使用className代替，因为class在JavaScript中是关键字

let dom = <div className={JS表达式}></div>;

给元素设置CSS样式

• 如果CSS属性名包含-，则将命名规则改为小驼峰规则

let dom = <div style={{
  color: "red",
  fontSize: "0px",
}}></div>;

JS表达式

• JS表达式必须是执行后有结果的

可以作为JS表达式的数据

变量或值

let value = 0;

let dom = <div>{0}</div>;
let dom = <div>{value}</div>;

三目运算符

let dom = <div>{条件 ? "条件为真时显示的内容" : "条件为假时显示的内容"}</div>;

借助于数组的迭代方法map

let data = [
  {id: 1, value: ""},
  {id: 2, value: ""},
  {id: 3, value: ""},
]

let data = <div>{data.map(item => ())}</div>

JS表达式渲染不同类型的值的效果

number、string

• 实际值是什么就会展示什么

boolean、null、undefined、Symbol数据、BigInt数据

• 不会渲染任何内容

数组对象

• 把数组中的每一项以此进行渲染，如果数组中存在无法渲染的对象则不会渲染任何内容

函数对象

• 不能直接使用胡子语法进行渲染，但可以作为函数组件用<Component/>进行渲染

遍历数组

• 列表元素需要key属性来确定标签的唯一性

let data = [
  {id: 1, value: ""},
  {id: 2, value: ""},
  {id: 3, value: ""},
]

const list = data.map(item => (
  <li key={item.id}>{item.value}</li>
))

let dom = <ul>{list}</ul>

事件

• 通过on事件名给HTML标签添加事件

function 函数名() {}

let dom = <div onClick={函数名}>文本内容</div>;

传递参数

function 函数名(事件默认形参, 自定义形参) {}

let dom = <div onClick={() => 函数名(自定义实参)}>文本内容</div>;

通过bind函数

function 函数名(事件默认形参, 自定义形参) {}

let dom = <div onClick={函数名.bind(this, 自定义实参)}>文本内容</div>;

完成

参考文献

哔哩哔哩——吴悠讲编程
哔哩哔哩——前端开发专业教程