JSX 入门:React 开发者的必备技能指南

2024-04-08 05:12

本文主要是介绍JSX 入门:React 开发者的必备技能指南,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

JSX 是 React 的一种语法扩展,用于描述 UI 组件的外观。在 React 中,JSX 可以与 JavaScript 一起使用,帮助您在应用程序中创建动态和可重用的组件。以下是 JSX 的语法、使用技巧和注意事项,以及一些示例代码。

  1. JSX 基础语法

JSX 允许在 JavaScript 代码中编写类似于 HTML 的代码。在 JSX 中,您可以创建标签、属性和子元素,以构建组件的结构。以下是一个简单的 JSX 示例:

const greeting = <h1>Hello, World!</h1>;
  1. JSX 表达式

JSX 允许在大括号 {} 内嵌入 JavaScript 表达式。这使您可以动态生成元素并在其中使用变量和函数。

const name = 'John';
const greeting = <h1>Hello, {name}!</h1>;
  1. 条件渲染

在 JSX 中,可以使用 JavaScript 运算符(如三元运算符或逻辑与运算符)根据条件渲染元素。

const isLoggedIn = true;
const message = (<div>{isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}</div>
);
  1. 列表和键

在 JSX 中渲染列表时,需要为每个元素分配一个唯一的 key 属性,以帮助 React 识别哪些元素已更改、添加或删除。

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =><li key={number.toString()}>{number}</li>
);
  1. 事件处理

在 JSX 中,可以使用 JavaScript 函数来处理用户交互事件。为了在事件处理程序中引用函数,需要使用驼峰式命名法(例如 onClick 而不是 onclick)。

function handleClick() {console.log('Button clicked!');
}const button = <button onClick={handleClick}>Click me</button>;
  1. 组件

组件是 React 中的核心概念。在 JSX 中,可以将组件视为自定义标签,并在其他组件中嵌套使用这些标签。

function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}const element = <Welcome name="John" />;
  1. 注意事项
  • JSX 标签必须闭合。
  • JSX 标签名称必须以大写字母开头,以区分内置的 HTML 标签和自定义组件。
  • 在 JSX 中,需要使用 className 代替 class 属性,以避免与 JavaScript 的保留字冲突。
  • 在 JSX 中,需要使用 htmlFor 代替 for 属性,以避免与 JavaScript 的保留字冲突。
  1. 多个元素

在 JSX 中,组件只能返回一个根元素。如果需要返回多个元素,可以将其包装在一个父元素中,例如 <div><React.Fragment>

function App() {return (<div><h1>Hello, World!</h1><p>Welcome to React.</p></div>);
}// 或者使用 React.Fragment
function App() {return (<React.Fragment><h1>Hello, World!</h1><p>Welcome to React.</p></React.Fragment>);
}// 或者使用简写语法
function App() {return (<><h1>Hello, World!</h1><p>Welcome to React.</p></>);
}
  1. 内联样式

在 JSX 中,可以使用内联样式来设置元素的样式。需要将样式属性设置为一个 JavaScript 对象,其中键为驼峰式的 CSS 属性名称,值为字符串值。

const divStyle = {color: 'white',backgroundColor: 'black',padding: '10px',fontSize: '24px'
};const styledDiv = <div style={divStyle}>Styled Div</div>;
  1. 展开运算符

在 JSX 中,可以使用展开运算符(...)将一个对象的属性传递给组件。

const props = {name: 'John',age: 30
};function User(props) {return (<div><p>Name: {props.name}</p><p>Age: {props.age}</p></div>);
}const user = <User {...props} />;
  1. 默认属性

在 React 中,可以为组件的属性设置默认值。这在组件接收到未定义的属性时非常有用。

function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}Welcome.defaultProps = {name: 'Guest'
};const element = <Welcome />; // 渲染 "Hello, Guest"
  1. 属性类型检查

使用 PropTypes 库可以为组件的属性进行类型检查,以确保正确地使用组件。

import PropTypes from 'prop-types';function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}Welcome.propTypes = {name: PropTypes.string.isRequired
};
  1. HTML 属性命名

在 JSX 中,需要使用驼峰式命名法来命名属性。这意味着所有属性名称都应该以小写字母开头,后跟一个或多个大写字母,例如 onClicktabIndexariaLabel

const button = (<button onClick={handleClick} tabIndex="0" aria-label="Click me">Click me</button>
);

请注意,当在 JSX 中使用 HTML 属性时,需要使用驼峰式命名法,即使 HTML 属性本身是小写的。例如,使用 className 代替 class,使用 htmlFor 代替 for

  1. 自定义属性

在 JSX 中,您可以为组件添加自定义属性,以传递额外的信息。自定义属性应以 data-*aria-* 为前缀,以避免与内置属性冲突。

function MyComponent(props) {return (<div data-my-prop={props.myProp}>{props.children}</div>);
}const element = (<MyComponent myProp="custom-value"><h1>Hello, World!</h1></MyComponent>
);

总之,掌握 JSX 的语法和使用技巧对于 React 开发至关重要。通过学习这些概念并实践示例代码,您可以更好地利用 JSX 来创建动态和可重用的组件,并提高应用程序的整体性能和可维护性。

这篇关于JSX 入门:React 开发者的必备技能指南的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/884651

相关文章

CentOS7更改默认SSH端口与配置指南

《CentOS7更改默认SSH端口与配置指南》SSH是Linux服务器远程管理的核心工具,其默认监听端口为22,由于端口22众所周知,这也使得服务器容易受到自动化扫描和暴力破解攻击,本文将系统性地介绍... 目录引言为什么要更改 SSH 默认端口?步骤详解:如何更改 Centos 7 的 SSH 默认端口1

SpringBoot多数据源配置完整指南

《SpringBoot多数据源配置完整指南》在复杂的企业应用中,经常需要连接多个数据库,SpringBoot提供了灵活的多数据源配置方式,以下是详细的实现方案,需要的朋友可以参考下... 目录一、基础多数据源配置1. 添加依赖2. 配置多个数据源3. 配置数据源Bean二、JPA多数据源配置1. 配置主数据

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

python中各种常见文件的读写操作与类型转换详细指南

《python中各种常见文件的读写操作与类型转换详细指南》这篇文章主要为大家详细介绍了python中各种常见文件(txt,xls,csv,sql,二进制文件)的读写操作与类型转换,感兴趣的小伙伴可以跟... 目录1.文件txt读写标准用法1.1写入文件1.2读取文件2. 二进制文件读取3. 大文件读取3.1

SpringBoot中配置Redis连接池的完整指南

《SpringBoot中配置Redis连接池的完整指南》这篇文章主要为大家详细介绍了SpringBoot中配置Redis连接池的完整指南,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以... 目录一、添加依赖二、配置 Redis 连接池三、测试 Redis 操作四、完整示例代码(一)pom.

Linux内核参数配置与验证详细指南

《Linux内核参数配置与验证详细指南》在Linux系统运维和性能优化中,内核参数(sysctl)的配置至关重要,本文主要来聊聊如何配置与验证这些Linux内核参数,希望对大家有一定的帮助... 目录1. 引言2. 内核参数的作用3. 如何设置内核参数3.1 临时设置(重启失效)3.2 永久设置(重启仍生效

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

数据库面试必备之MySQL中的乐观锁与悲观锁

《数据库面试必备之MySQL中的乐观锁与悲观锁》:本文主要介绍数据库面试必备之MySQL中乐观锁与悲观锁的相关资料,乐观锁适用于读多写少的场景,通过版本号检查避免冲突,而悲观锁适用于写多读少且对数... 目录一、引言二、乐观锁(一)原理(二)应用场景(三)示例代码三、悲观锁(一)原理(二)应用场景(三)示例