React JSX简介

最新推荐文章于 2023-05-01 09:00:00 发布

小晗同学

最新推荐文章于 2023-05-01 09:00:00 发布

阅读量369

点赞数 2

分类专栏： React 文章标签： javascript reactjs jsx

本文链接：https://blog.csdn.net/Yuki_yuhan/article/details/114641020

版权

React 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

学习目录

React 学习：JSX 简介

React 学习：JSX 简介

01 了解 JSX

const element = <h1>Hello, world!</h1>;

上面的标签语法称为JSX，是一个JavaScript 的语法扩展。JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 具有 JavaScript 的全部功能,它可以生成React 元素。

React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。React 不强制要求使用 JSX，但是在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。

02 JSX 中嵌入表达式

在 JSX 语法中，可以在大括号内放置任何有效的JavaScript 表达式。

字符串表达式

// 字符串表达式
const person = 'Peppa';
const element = <h1>Hello, {person}</h1>;

对象

// 对象
const personName = {
  one: 'Peppa',
  two: 'George',
};

const element = <h1>Hello, {personName.one}</h1>;

函数

// 函数
function personPeppa() {
  return 'Peppa';
}

// 建议多使用箭头函数，可以避免处理this指向问题
const personGeorge = () => {
  return 'George';
};

const element = (
  <div>
    <h1>Hello, {personPeppa()}</h1>
    <h2>Hello, {personGeorge()}</h2>
  </div>
);

为了便于阅读，我们会将 JSX 拆分为多行。同时建议将内容包裹在括号中，虽然这样做不是强制要求的，但是这可以避免遇到自动插入分号陷阱。

03 JSX 是一个表达式

在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象。也就是说，你可以在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX：

const isSay = true;

const sayHello = (isSay) => {
  if (isSay) {
    return <h1>Hello, {personPeppa()}!</h1>;
  }
  return <h1>Hello, person!</h1>;
};

需要注意的是 JSX 表达式里面只能有一个根节点，即需要用一个标签将里面的内容包裹起来，可以使用<div></div>,也可以使用空标签<></>

04 JSX 特定属性

你可以通过使用大括号，来在属性值中插入一个 JavaScript 表达式：

const element = <img src={user.avatarUrl} />;

在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号。你应该仅使用引号（对于字符串值）或大括号（对于表达式）中的一个，对于同一属性不能同时使用这两种符号。

警告：因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。