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

相关文章

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战:从入门到进阶优化1. MyBatis

Java并发编程必备之Synchronized关键字深入解析

《Java并发编程必备之Synchronized关键字深入解析》本文我们深入探索了Java中的Synchronized关键字,包括其互斥性和可重入性的特性,文章详细介绍了Synchronized的三种... 目录一、前言二、Synchronized关键字2.1 Synchronized的特性1. 互斥2.

Java利用JSONPath操作JSON数据的技术指南

《Java利用JSONPath操作JSON数据的技术指南》JSONPath是一种强大的工具,用于查询和操作JSON数据,类似于SQL的语法,它为处理复杂的JSON数据结构提供了简单且高效... 目录1、简述2、什么是 jsONPath?3、Java 示例3.1 基本查询3.2 过滤查询3.3 递归搜索3.4

Spring Boot结成MyBatis-Plus最全配置指南

《SpringBoot结成MyBatis-Plus最全配置指南》本文主要介绍了SpringBoot结成MyBatis-Plus最全配置指南,包括依赖引入、配置数据源、Mapper扫描、基本CRUD操... 目录前言详细操作一.创建项目并引入相关依赖二.配置数据源信息三.编写相关代码查zsRArly询数据库数

SpringBoot启动报错的11个高频问题排查与解决终极指南

《SpringBoot启动报错的11个高频问题排查与解决终极指南》这篇文章主要为大家详细介绍了SpringBoot启动报错的11个高频问题的排查与解决,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一... 目录1. 依赖冲突:NoSuchMethodError 的终极解法2. Bean注入失败:No qu

JavaScript错误处理避坑指南

《JavaScript错误处理避坑指南》JavaScript错误处理是编程过程中不可避免的部分,它涉及到识别、捕获和响应代码运行时可能出现的问题,本文将详细给大家介绍一下JavaScript错误处理的... 目录一、错误类型:三大“杀手”与应对策略1. 语法错误(SyntaxError)2. 运行时错误(R

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

Python使用date模块进行日期处理的终极指南

《Python使用date模块进行日期处理的终极指南》在处理与时间相关的数据时,Python的date模块是开发者最趁手的工具之一,本文将用通俗的语言,结合真实案例,带您掌握date模块的六大核心功能... 目录引言一、date模块的核心功能1.1 日期表示1.2 日期计算1.3 日期比较二、六大常用方法详

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

MySQL中慢SQL优化方法的完整指南

《MySQL中慢SQL优化方法的完整指南》当数据库响应时间超过500ms时,系统将面临三大灾难链式反应,所以本文将为大家介绍一下MySQL中慢SQL优化的常用方法,有需要的小伙伴可以了解下... 目录一、慢SQL的致命影响二、精准定位问题SQL1. 启用慢查询日志2. 诊断黄金三件套三、六大核心优化方案方案