【笔记】JSX学习笔记

前言

JSX或JavaScript语法扩展，是JavaScript语言语法的扩展。在外表上与HTML类似，JSX提供了一种使用许多开发人员熟悉的语法来构建组件渲染的方法。React组件通常使用JSX撰写，尽管它们并非必须如此（组件也可以使用纯JavaScript撰写）。（维基百科）

JSX中通过直接在JS代码中添加HTML标签的方式实现直观的描述组件实例，本质是React.createElement()的语法糖，这种在JS代码中添加的HTML标签就是JSX中对于JS的扩展内容（下文简称：扩展内容），本文介绍的JSX语法均描述的是扩展内容的语法，非扩展内容语法与原JS语法保持一致

通过Babel转换JSX文件

传送门

扩展内容作为变量值

第一个参数：必选，标签名
第二个参数：可选，属性对象（class属性必须改用className）
第三个参数：可选，子节点数组

• 语法糖

const element = <div className="">
  <div onClick={ this.fn }>key: { this.state.key }</div>
  <div></div>
  <Son />
</div>;

• 扩展内容的实质是React.createElement()的语法糖

const element = React.createElement(
  "div",
  { className: "" },
  [
    React.createElement(
      "div",
      { onClick: this.fn },
      `key: ${this.state.key}`
    ),
    React.createElement("div"),
    React.createElement(Son)
  ]
);

扩展内容的注释

{/* 多行注释 */}

扩展内容的表达式插入

将表达式结果作为标签的文本内容

• 如果表达式结果为Number、String、Array类型，则均会转换为字符串并输出
  • 插入数组时会自动将数组所有元素进行字符串拼接（无分隔符），作为一个字符串插入
  • 插入NaN时会输出字符串NaN

const num = 0;
const element = <div>{ num }</div>;

const str = "";
const element = <div>{ str }</div>;

const arr = [""];
const element = <div>{ arr }</div>;

• 如果表达式结果为null、undefined、Boolean类型，则均不会输出任何内容；如果一定要输出结果为null、undefined、Boolean类型的值，则需要手动转换为字符串

const n = null;
const element = <div>{ n }</div>;

const n = undefined;
const element = <div>{ n }</div>;

const n = false;
const element = <div>{ n }</div>;

• 如果表达式结果为Object类型，则会报错；如果一定要输出结果为Object类型的值，则需要手动序列化

将表达式结果作为标签的属性值

• 不仅允许表达式结果为基本类型，还允许表达式结果为对象类型

const str = "";
const element = <div id={ str }></div>;

将表达式结果作为标签的class属性值

• 如果表达式结果作为class的属性值，则class必须改用className

const str = "";
const element = <div className={ str }></div>

• 可以通过插入数组的方式插入一组class属性值
  • 插入数组时会自动将数组所有元素进行字符串拼接（分隔符为,），作为一个字符串插入
    • 通过join()手动将数组中的所有元素以 作为分隔符拼接为一个字符串

const arr = [""];
const element = <div className={ arr.join(" ") }></div>

将表达式结果作为标签的style属性值

• 如果表达式结果作为style的属性值，则使用对象定义CSS属性，对象的属性名表示CSS的属性名，对象的属性值表示CSS的属性值，如果CSS属性名为连字符命名，则必须改用小驼峰命名

const str = {
  fontSize: "0px",
};
const element = <div style={ str }></div>;

将表达式结果作为标签的事件属性值

• 如果表达式结果作为标签的事件属性值，则事件名必须改用小驼峰的形式

const fn = function () {
  ...
};
const element = <div onClick={ fn }></div>;

事件回调函数传递参数

const fn = function (arg) {
  ...
};
const element = <div onClick={ () => fn("") }></div>;

const fn = function (arg) {
  ...
};
const element = <div onClick={ fn.bind(this, "") }></div>;

完成

参考文献

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