JSX 的使用1

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第22天，点击查看活动详情

JSX 的使用

JSX 基本概念

JSX 是 JavaScript XML 的简写，表示了在 JavaScript 中书写 XML 格式的代码。

它是 React 的核心内容，可以让我们在 React 中创建元素更加简单，更加直观，提高开发效率。

需要注意的是，JSX 是 JavaScript 的语法扩展，是一种语法糖，而不是一门新的语言。

这是原来创建一个 React 元素的写法：

import React from 'react';
​
import ReactDom from 'react-dom';
​
const element = React.createElement('h1', { id: 'title' }, 'Hello, React');
​
ReactDom.render(element, document.getElementById('root'));

换成 JSX 就是：

import ReactDom from 'react-dom';
​
const element = <h1 id="title">Hello, React</h1>
​
ReactDom.render(element, document.getElementById('root'));

我们现在默认安装的 React 版本都是 18.x了。从 React17 以后，React 核心包就可以不必显式导入了。脚手架工具在使用 Babel 编译 jsx 文件的时候会自动导入。

可以看到，JSX 语法相比 createElement 方法，更加简洁、直观、高效。

JSX 的语法和一些注意点

JSX 语法，使用一对标签来表示一个组件。

为了和原生 HTML 标签区分，原生标签使用小写，React 组件使用大写。

有几个特殊属性，写法不同，class 要写成 className ，for 要写成htmlFor。

节点没有内容的可以使用单标签。

JSX 必需有根节点，如果没有根节点，可以使用 <></> 进行包裹。

如果 JSX 有换行，最好使用 () 包裹。

代码示例：

• 特殊属性

// 特殊属性要修改：class -> className；for -> htmlFor 
<div className="box">
  <label htmlFor="username"></label>
  <input id="username" type="text" />
</div>

• 没有内容的节点，可以使用单标签

<span></span> 
// 没内容可以写成单标签
<span />

• 必须有根节点。有两种方式。

// 1. 使用 React.Fragment 组件
import React from 'react';
import ReactDom from 'react-dom';
​
const element = (
  <React.Fragment>
    // .....
  </React.Fragment>
);
​
ReactDom.render(element, document.getElementById('root'));
​
​
// 2. 使用 <></>，其实是 React.Fragment 的简写
import ReactDom from 'react-dom';
const element = (
  <>
    // ......
  </>
);
ReactDom.render(element, document.getElementById('root'));

• 内容太多使用小括号包裹

const element = (
  <>
     // ......
  </>
);

JSX 使用表达式

在JSX中可以写 JS 表达式，需要放在大括号{} 中。

常用的表达式形式包括：

• 展示数据
• 进行运算
• 三元运算
• 使用函数
• 使用 JSX
• 使用注释

import React from 'react';
import ReactDom from 'react-dom';
​
// 数据
const data = {  name: 'kw',  age: 18,};
​
// 函数
const up = () => {  return data.name.toUpperCase();};
​
// jsx 表达式
const list = (  
    <ul>  
        <li>jack</li> 
        <li>tony</li>  
    </ul>
);
​
const element = (  
    <div>    
        {/* 1. 使用数据。 JSX 注释也要写在 {} 中  */}    
        <div>姓名：{ data.name }</div>    
        <div>年龄：{ data.age }</div>    
        
        {/* 2. 使用运算 */}
        <div>明年几岁：{ data.age + 1 }</div>   
        
        {/* 3. 使用三元 */}    
        <div>是否成年：{ data.age > 18 ? '是' : '否' }</div> 
        
        {/* 4. 使用函数 */}    
        <div>姓名大写：{ up() }</div>  
        
        {/* 5. 使用JSX ，jsx也是表达式 */} 
        <div>朋友：{ list }</div> 
    </div>);
​
ReactDom.render(element, document.getElementById('root'));

小结

本文简单介绍了 JSX 的一些常用写法和注意事项。下文会继续介绍。