- React 是一种流行的 JavaScript 库，用于构建动态用户界面。在一个 React 应用程序中，有时需要一个按钮或链接来触发显示或隐藏一个相关的组件。这种需求可以通过使用 React 状态管理和事件处理机制来实现。在本文中，我们将介绍如何使用 React 来实现点击显示或隐藏另一个组件。我们将首先讨论如何使用 React 状态管理来控制组件的可见性，然后介绍如何使用事件处理机制来响... React 是一种流行的 JavaScript 库，用于构建动态用户界面。在一个 React 应用程序中，有时需要一个按钮或链接来触发显示或隐藏一个相关的组件。这种需求可以通过使用 React 状态管理和事件处理机制来实现。在本文中，我们将介绍如何使用 React 来实现点击显示或隐藏另一个组件。我们将首先讨论如何使用 React 状态管理来控制组件的可见性，然后介绍如何使用事件处理机制来响...
- 在 React 应用中，我们经常需要根据用户的点击事件来执行相应的操作。在某些情况下，我们需要获取用户点击元素的唯一标识符（ID），以便进行进一步的处理。本文将详细介绍如何在 React 中获取点击元素的 ID，并提供示例代码帮助你理解和应用这个功能。 使用事件处理函数在 React 中，我们可以使用事件处理函数来获取点击元素的信息。通过事件对象（event object）可以访问到点击元素... 在 React 应用中，我们经常需要根据用户的点击事件来执行相应的操作。在某些情况下，我们需要获取用户点击元素的唯一标识符（ID），以便进行进一步的处理。本文将详细介绍如何在 React 中获取点击元素的 ID，并提供示例代码帮助你理解和应用这个功能。 使用事件处理函数在 React 中，我们可以使用事件处理函数来获取点击元素的信息。通过事件对象（event object）可以访问到点击元素...
- 在 React 中，一些 HTML 元素，比如 input 和 textarea，具有 onChange 事件。onChange 事件是一个非常有用、非常常见的事件，用于捕获输入框中的文本变化。有时候，我们需要将多个参数同时传递给 onChange 事件处理函数，在本文中，我们将介绍如何实现这一目标。 单个参数传递在 React 中，通常情况下，onChange 事件处理函数接收一个 eve... 在 React 中，一些 HTML 元素，比如 input 和 textarea，具有 onChange 事件。onChange 事件是一个非常有用、非常常见的事件，用于捕获输入框中的文本变化。有时候，我们需要将多个参数同时传递给 onChange 事件处理函数，在本文中，我们将介绍如何实现这一目标。 单个参数传递在 React 中，通常情况下，onChange 事件处理函数接收一个 eve...
- 一、react篇1、react 生命周期函数• 初始化阶段：– getDefaultProps:获取实例的默认属性– getInitialState:获取每个实例的初始化状态– componentWillMount：组件即将被装载、渲染到页面上– render:组件在这里生成虚拟的 DOM 节点– componentDidMount:组件真正在被装载之后• 运行中状态：– component... 一、react篇1、react 生命周期函数• 初始化阶段：– getDefaultProps:获取实例的默认属性– getInitialState:获取每个实例的初始化状态– componentWillMount：组件即将被装载、渲染到页面上– render:组件在这里生成虚拟的 DOM 节点– componentDidMount:组件真正在被装载之后• 运行中状态：– component...
- 一、前言在前期博文《ReactNative进阶（三）：ReactNative 项目启动原理介绍》讲解了RN启动过程及原理，今天主要讲解下RN项目启动运行接口AppRegistry。 二、AppRegistry 简介每一个应用程序的运行都需要有一个入口文件或者入口函数，而在React Native 中，AppRegistry是RN应用的入口函数。AppRegistry负责注册运行React ... 一、前言在前期博文《ReactNative进阶（三）：ReactNative 项目启动原理介绍》讲解了RN启动过程及原理，今天主要讲解下RN项目启动运行接口AppRegistry。 二、AppRegistry 简介每一个应用程序的运行都需要有一个入口文件或者入口函数，而在React Native 中，AppRegistry是RN应用的入口函数。AppRegistry负责注册运行React ...
- 一、前言ReactNative启动完成之后，就会加载jsbundle中的js代码，进入js层渲染。此篇博文重点讲解 ReactNative JS 层渲染涉及的 diff 算法。使用 React 写过 Web 和 ReactNative的，很明显感觉到：除了组件命名不一样之外，生命周期、刷新机制等几乎是完全一样的，这也就是 Facebook 所说的“learn once, write any... 一、前言ReactNative启动完成之后，就会加载jsbundle中的js代码，进入js层渲染。此篇博文重点讲解 ReactNative JS 层渲染涉及的 diff 算法。使用 React 写过 Web 和 ReactNative的，很明显感觉到：除了组件命名不一样之外，生命周期、刷新机制等几乎是完全一样的，这也就是 Facebook 所说的“learn once, write any...
- 6、属性节点属性节点（Attr）在DOM也是一个对象，通常不需要获取对象而是直接通过元素即可完成对其的各种操作如何操作属性节点 ? 方式一：读取：元素.属性名（注意，class属性需要使用className来读取）读取一个布尔值时，会返回true或false修改：元素.属性名 = 属性值 方式二：读取：元素.getAttribute(属性名)修改：元素.setAttribute(属性名, ... 6、属性节点属性节点（Attr）在DOM也是一个对象，通常不需要获取对象而是直接通过元素即可完成对其的各种操作如何操作属性节点 ? 方式一：读取：元素.属性名（注意，class属性需要使用className来读取）读取一个布尔值时，会返回true或false修改：元素.属性名 = 属性值 方式二：读取：元素.getAttribute(属性名)修改：元素.setAttribute(属性名, ...
- 字符串 split()可以根据正则表达式来对一个字符串进行拆分 search()可以去搜索符合正则表达式的内容第一次在字符串中出现的位置 replace()根据正则表达式替换字符串中的指定内容 match()根据正则表达式去匹配字符串中符合要求的内容 matchAll()根据正则表达式去匹配字符串中符合要求的内容(必须设置g 全局匹配)它返回的是一个迭代器 <script> ... 字符串 split()可以根据正则表达式来对一个字符串进行拆分 search()可以去搜索符合正则表达式的内容第一次在字符串中出现的位置 replace()根据正则表达式替换字符串中的指定内容 match()根据正则表达式去匹配字符串中符合要求的内容 matchAll()根据正则表达式去匹配字符串中符合要求的内容(必须设置g 全局匹配)它返回的是一个迭代器 <script> ...
- 正则表达式 正则表达式正则表达式用来定义一个规则通过这个规则计算机可以检查一个字符串是否符合规则或者将字符串中符合规则的内容提取出来正则表达式也是JS中的一个对象，所以要使用正则表达式，需要先创建正则表达式的对象new RegExp() 可以接收两个参数（字符串） 1.正则表达式 2.匹配模式 <script> let reg = new RegExp('a','i... 正则表达式 正则表达式正则表达式用来定义一个规则通过这个规则计算机可以检查一个字符串是否符合规则或者将字符串中符合规则的内容提取出来正则表达式也是JS中的一个对象，所以要使用正则表达式，需要先创建正则表达式的对象new RegExp() 可以接收两个参数（字符串） 1.正则表达式 2.匹配模式 <script> let reg = new RegExp('a','i...
- 10、包装类在JS中，除了直接创建原始值外，也可以创建原始值的对象通过 new String() 可以创建String类型的对象通过 new Number() 可以创建Number类型的对象通过 new Boolean() 可以创建Boolean类型的对象但是千万不要这么做包装类： JS中一共有5个包装类String --> 字符串包装为String对象Number --> 数值包装为Nu... 10、包装类在JS中，除了直接创建原始值外，也可以创建原始值的对象通过 new String() 可以创建String类型的对象通过 new Number() 可以创建Number类型的对象通过 new Boolean() 可以创建Boolean类型的对象但是千万不要这么做包装类： JS中一共有5个包装类String --> 字符串包装为String对象Number --> 数值包装为Nu...
- 14、旧类早期JS中，直接通过函数来定义类一个函数如果直接调用 xxx() 那么这个函数就是一个普通函数一个函数如果通过new调用 new xxx() 那么这个函数就是一个够早函数 等价于： class Person{ } <script> var Person = (function () { ... 14、旧类早期JS中，直接通过函数来定义类一个函数如果直接调用 xxx() 那么这个函数就是一个普通函数一个函数如果通过new调用 new xxx() 那么这个函数就是一个够早函数 等价于： class Person{ } <script> var Person = (function () { ...
- 11、原型对象访问一个对象的原型对象对象.protoObject.getPrototypeOf(对象)原型对象中的数据：对象中的数据（属性、方法等）constructor （对象的构造函数）注意：原型对象也有原型，这样就构成了一条原型链，根据对象的复杂程度不同，原型链的长度也不同p对象的原型链：p对象 --> 原型 --> 原型 --> nullobj对象的原型链：obj对象 --> 原型... 11、原型对象访问一个对象的原型对象对象.protoObject.getPrototypeOf(对象)原型对象中的数据：对象中的数据（属性、方法等）constructor （对象的构造函数）注意：原型对象也有原型，这样就构成了一条原型链，根据对象的复杂程度不同，原型链的长度也不同p对象的原型链：p对象 --> 原型 --> 原型 --> nullobj对象的原型链：obj对象 --> 原型...
- 1、初识对象 数据类型： 原始值 1.数值 Number 2.大整数 BigInt 3.字符串 String 4.布尔值 Boolean 5.空值 Null 6.未定义 Undefined 7.符号 Symbol 对象对... 1、初识对象 数据类型： 原始值 1.数值 Number 2.大整数 BigInt 3.字符串 String 4.布尔值 Boolean 5.空值 Null 6.未定义 Undefined 7.符号 Symbol 对象对...
- 分享我在日常开发中总结的前端技巧，今天是多个页面的操作聚合到某个页面的实现方案。 分享我在日常开发中总结的前端技巧，今天是多个页面的操作聚合到某个页面的实现方案。
- 分享我工作中总结的前端开发提效小技巧，本篇是关于业务功能的。 分享我工作中总结的前端开发提效小技巧，本篇是关于业务功能的。
上滑加载中
推荐直播
-
-
华为开发者空间玩转DeepSeek2025/03/13 周四 19:00-20:30
马欣 山东商业职业技术学院云计算专业讲师，山东大学、山东建筑大学等多所本科学校学生校外指导老师
同学们，想知道如何利用华为开发者空间部署自己的DeepSeek模型吗？想了解如何用DeepSeek在云主机上探索好玩的应用吗？想探讨如何利用DeepSeek在自己的专有云主机上辅助编程吗？让我们来一场云和AI的盛宴。
回顾中 -
华为云Metastudio×DeepSeek与RAG检索优化分享2025/03/14 周五 16:00-17:30
大海 华为云学堂技术讲师 Cocl 华为云学堂技术讲师
本次直播将带来DeepSeek数字人解决方案，以及如何使用Embedding与Rerank实现检索优化实践，为开发者与企业提供参考，助力场景落地。
去报名
热门标签