Web前端►框架►React

什么是JSX

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/01/27/%E4%BB%80%E4%B9%88%E6%98%AFJSX/

摘要

本文主要讲述了：

  1. 什么是 JSX
  2. 将 React 元素写成多行
  3. 一个 React 元素有且只有一个顶层元素
  4. 空元素
  5. HTML 特性
  6. 注释
  7. 插值

正文

什么是 JSX

JSX 的全称是 JavaScript XML，它是 JavaScript 语法的扩展，看起来和 HTML 很像

JSX 无法直接在浏览器里运行，所以需要使用babel将其编译成 JavaScript

JSX 的本质就是React.createElement()的语法糖

示例：

1
2
3
4
5
const element = <h1>hello, world</h1>;

function getElement() {
  return <h1>hello, jsweibo</h1>;
}

将 React 元素写成多行

如果一个 React 元素由多个元素嵌套构成，为了提升代码可读性，常常将其写为多行

此时需要在最外层使用小括号包裹，否则 JavaScript 运行时可能会自动插入分号导致代码运行报错

示例：

1
2
3
4
5
const element = (
  <div>
    <h1>Hello, world!</h1>
  </div>
);

一个 React 元素有且只有一个顶层元素

默认情况下，一个 React 元素有且只有一个顶层元素，否则会报错

示例：

1
2
3
4
5
6
const element = (
  <div>
    <div>1</div>
    <div>2</div>
  </div>
);

React.Fragment组件

React.Fragment组件可以让一个 React 元素拥有多个顶层元素

示例：

1
2
3
4
5
6
const element = (
  <React.Fragment>
    <div>1</div>
    <div>2</div>
  </React.Fragment>
);

或

1
2
3
4
5
6
7
// 简写形式
const element = (
  <>
    <div>1</div>
    <div>2</div>
  </>
);

空元素

可以写成以下任意一种形式：

  • 自封闭
  • 存在结束标签

示例：

1
2
3
4
5
const element = (
  <div>
    <img src="https://www.baidu.com/img/bd_logo1.png" />
  </div>
);

或

1
2
3
4
5
const element = (
  <div>
    <img src="https://www.baidu.com/img/bd_logo1.png"></img>
  </div>
);

HTML 特性

由于各种原因，部分 HTML 特性无法直接在 JSX 中使用

  1. 使用小驼峰命名法，例如：tabindex写作tabIndex
  2. 由于class是 JavaScript 的关键字，因此class特性写作className
  3. 由于for是 JavaScript 的关键字，因此for特性写作htmlFor

className

  1. 不要传递数组或对象给className。传入的值会被先转换成字符串，而后再参与页面渲染

style

  1. 在 HTML 中，元素的style特性接受 CSS 字符串，但在 JSX 中，style特性接受一个 JavaScript 对象
  2. JavaScript 对象的属性名称使用小驼峰命名法，例如：font-size写作fontSize
  3. React 不会自动补齐 CSS 属性的浏览器引擎前缀
  4. 对于部分属性，React 将会在number型属性值后自动添加px后缀

示例：style特性

1
2
3
4
5
6
7
8
9
10
const foo = {
  color: '#f00',
  fontSize: 64,
};

const element = (
  <div>
    <h1 style={foo}>Hello, world!</h1>
  </div>
);

注释

示例：单行注释

1
2
3
4
5
6
7
8
9
10
const element = (
  <div>
    {
      // 我是单行注释
      // 我是单行注释
    }
    <div>1</div>
    <div>2</div>
  </div>
);

示例：多行注释

1
2
3
4
5
6
7
8
const element = (
  <div>
    {/*我是多行注释
       我是多行注释*/}
    <div>1</div>
    <div>2</div>
  </div>
);

插值

textContent

  • 形式：使用{}包裹 JavaScript 变量
  • 本质：将 JavaScript 变量作为子元素

示例：

1
const element = <div>{1 + 1}</div>;

会被渲染：

  • string
  • number：包括但不限于：0、1、-1、NaN、Infinity
  • Array：数组中的元素会被挨个渲染

不会被渲染：

  • boolean
  • undefined
  • null

通常情况下，会报错：

  • Object
  • function

示例：

1
2
3
4
5
6
7
8
9
10
// 传入`Object`作为子元素
// 报错
const element = (
  <div>
    {{
      name: 'jsweibo',
      age: 18,
    }}
  </div>
);

更进一步

注意：

  • 只要组件对传入的props进行了处理，传入Object、function作为子元素就不会报错
  • React 术语 Render Props 指的就是：传入自定义元素的某个props，为一个返回值类型为 React 元素的函数

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 组件对传入的`props`进行了处理
function Foo(props) {
  if (props.children instanceof Function) {
    return <div>{props.children()}</div>;
  } else if (typeof props.children === 'object') {
    return <div>{JSON.stringify(props.children)}</div>;
  }
}

// 传入`Object`作为组件的子元素
const element = (
  <Foo>
    {{
      name: 'jsweibo',
      age: 18,
    }}
  </Foo>
);

HTML 特性

注意：

  1. 不准使用双引号包裹
  2. 使用小驼峰命名法

示例：

1
2
const imgUrl = 'https://www.baidu.com/img/bd_logo1.png';
const element = <img src={imgUrl} />;

DOM 属性

注意：

  1. 不准使用双引号包裹
  2. 使用小驼峰命名法
  3. innerHTML写作dangerouslySetInnerHTML

示例：使用dangerouslySetInnerHTML时，向其传递一个包含__html属性的对象

1
2
3
4
const info = {
  __html: 'hello, jsweibo',
};
const element = <div dangerouslySetInnerHTML={info}></div>;

元素变量

React 元素可以存储在单个变量或者数组里

示例：

1
2
3
4
5
6
7
8
// 元素变量
const foo = <p>hello, world</p>;
const element = (
  <div>
    <h1>hello, jsweibo</h1>
    {foo}
  </div>
);

示例：

1
2
3
4
5
6
7
8
9
const numbers = [1, 2, 3, 4, 5];

// 元素数组
const listItems = numbers.map((number) => (
  <li key={number.toString()}>{number}</li>
));

// 插值
const element = <ul>{listItems}</ul>;

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/01/27/%E4%BB%80%E4%B9%88%E6%98%AFJSX/

本文对你有帮助？请支持我

支付宝
微信