当前位置： 首页 > news >正文

【React】搜索时高亮被搜索选中的文案

news 来源：原创 2025/7/23 14:35:52

文章目录

    • 代码实现

代码实现

函数封装：

export function highlightKeyword(input: string, keyword: string | undefined) {if (!keyword || !input || !input.includes(keyword)) return input;const startIndex = input.indexOf(keyword);return React.createElement('span', null, [input.substring(0, startIndex),React.createElement('span',{style: {backgroundColor: 'rgba(255, 255, 0, 0.8)',color: 'black',},},keyword,),input.substring(startIndex + keyword.length),]);
}

使用案例：

import React from 'react';
import { Tree } from 'antd';const { DirectoryTree } = Tree;const treeData = [{title: '目录1',key: '1',children: [{ title: '目标目录', key: '1-1' }, // 此节点名称会显示为红色{ title: '子目录2', key: '1-2' },],},{title: '目录2',key: '2',},
];const App = () => {const [searchText, setSearchText] = useState('')return <div><Input placeholder="请输入搜索文案" onChange={(e)=>setSearchText(e.target.value)} /><DirectoryTreetreeData={treeData}titleRender={(nodeData) => {return (<span style={{ color: isMatched ? 'red' : 'inherit' }}>{searchText ? highlightKeyword(nodeData.title, searchText) : nodeData.title}</span>);}}/></div>
};export default App;

相关文章：

【React】搜索时高亮被搜索选中的文案

文章目录 代码实现 代码实现 函数封装&#xff1a; export function highlightKeyword(input: string, keyword: string | undefined) {if (!keyword || !input || !input.includes(keyword)) return input;const startIndex input.indexOf(keyword);return React.createEle…...

编程日记 2025/7/23 14:35:52

MCP（Minecraft Coder Pack）完全指南：从入门到精通

1. 什么是MCP&#xff1f; Minecraft Coder Pack&#xff08;简称MCP&#xff09;是一套用于反编译、修改和重新编译Minecraft Java版源代码的工具集。它允许开发者深入研究Minecraft的底层代码&#xff0c;并在此基础上进行模组&#xff08;Mod&#xff09;开发、代码分析或自…...

编程日记 2025/7/19 11:41:44

stm32week12

stm32学习 九.stm32与HAL库 2.HAL库框架 总架构&#xff1a; 文件介绍&#xff1a; ppp是某一外设&#xff0c;ex是拓展功能 HAL库API函数和变量命名规则&#xff1a; HAL库对寄存器位操作的相关宏定义&#xff1a; HAL库的回调函数&#xff1a; 3.STM32启动过程 MDK编译过…...

编程日记 2025/7/23 14:34:29

mindspeed-rl使用注意事项

1、安装 参考1&#xff1a;docs/install_guide.md R1-CLM/MindSpeed-RL - Gitee.com 参考2&#xff1a;VLLM x Ascend框架_vllm-ascend-CSDN博客 2、SFT微调 整体参考docs/supervised_finetune.md 自定义数据格式同&#xff1a;AUTO-DL 910B mindspeed-llm 4层DeepSeek …...

编程日记 2025/7/23 14:25:37

第 4 篇：平稳性 - 时间序列分析的基石

第 4 篇&#xff1a;平稳性 - 时间序列分析的基石 在上一篇中&#xff0c;我们学习了如何将时间序列分解为趋势、季节性和残差。我们看到&#xff0c;很多真实世界的时间序列&#xff08;比如 CO2 浓度&#xff09;都包含明显的趋势&#xff08;长期向上或向下&#xff09;和/…...

编程日记 2025/7/23 14:33:31

KRaft面试思路引导

Kafka实在2.8之后就用KRaft进行集群管理了 Conroller负责选举Leader&#xff0c;同时Controller管理集群元数据状态信息&#xff0c;并将元数据信息同步给各个分区的Leader 和Zookeeper管理一样&#xff0c;会选出一个Broker作为Controller去管理整个集群&#xff0c;但是元数…...

编程日记 2025/7/23 10:05:48

怎么建立自然语言领域的评价标准

怎么建立自然语言领域的评价标准 明确评价目标与对象 首先要清晰界定评价的目标，比如是评估模型对文本语义的理解能力、生成文本的质量，还是系统在信息检索中的表现等。同时，明确评价对象，可能是一个语言模型、一个问答系统、一个机器翻译工具等。确定评价维度与指标 语言…...

编程日记 2025/7/23 14:25:38

EMQX学习笔记

MQTT简介 MQTT是一种基于发布订阅模式的消息传输协议 消息&#xff1a;设备和设备之间传输的数据&#xff0c;或者服务和服务之间传输的数据 协议&#xff1a;传输数据时所遵循的规则 轻量级&#xff1a;MQTT协议占用的请求源较少&#xff0c;数据报文较小 可靠较强&#xff…...

编程日记 2025/6/29 9:42:28

组件是怎样写的(1)：虚拟列表-VirtualList

本篇文章是《组件是怎样写的》系列文章的第一篇&#xff0c;该系列文章主要说一下各组件实现的具体逻辑&#xff0c;组件种类取自 element-plus 和 antd 组件库。 每个组件都会有 vue 和 react 两种实现方式&#xff0c;可以点击 https://hhk-png.github.io/components-show/ …...

编程日记 2025/6/29 9:42:15

CGAL 计算直线之间的距离（3D）

文章目录 一、简介二、实现代码三、实现效果一、简介 这里的计算思路很简单： 1、首先将两个三维直线均平移至过原点处，这里两条直线可以构成一个平面normal。 2、如果两个直线平行，那么两条直线之间的距离就转换为直线上一点到另一直线的距离。 3、如果两个直线不平行，则可…...

编程日记 2025/7/23 14:32:32

定期检查滚珠丝杆的频率是多久？

定期检查滚珠丝杆的频率通常是每半年进行一次‌&#xff0c;根据不同的使用环境和设备类型&#xff0c;滚珠丝杆的检查周期有所不同。接下来我们一起看看滚珠丝杆的维护保养方法&#xff1a;‌ 1、‌清洗‌&#xff1a;每隔一段时间对滚珠丝杆进行清洁&#xff0c;将滚珠丝杆拆…...

编程日记 2025/6/29 9:42:14

Spark-SQL连接Hive全攻略

在大数据处理领域&#xff0c;Spark-SQL与Hive的结合能发挥强大的功能。今天就来给大家分享一下Spark-SQL连接Hive的多种方式。 Spark SQL编译时可选择包含Hive支持&#xff0c;这样就能使用Hive表访问、UDF、HQL等特性&#xff0c;而且无需提前安装Hive。其连接方式丰富多样…...

编程日记 2025/7/3 1:03:03

在Ubuntu 18.04下编译OpenJDK 11

在Ubuntu 18.04下编译OpenJDK 11 源码下载地址&#xff1a; 链接: https://pan.baidu.com/s/1QAdu-B6n9KqeBakGlpBS3Q 密码: 8lho Linux下的环境要求 不同版本的jdk会要求在不同版本的Ubuntu下编译&#xff0c;不要用太高版本的Ubuntu或者gcc&#xff0c;特别是gcc&#xf…...

编程日记 2025/7/11 1:19:36

Spring MVC 一个简单的多文件上传

原始代码逐行解释 PostMapping("/uploads") // ① 声明处理POST请求&#xff0c;路径为"/uploads" ResponseBody // ② 直接返回数据到响应体&#xff0c;不进行视图解析 public String uploads(MultipartFile[] files, // …...

编程日记 2025/7/23 14:25:38

FreeRTos学习记录--1.工程创建与源码概述

1.工程创建与源码概述 1.1 工程创建 使用STM32CubeMX&#xff0c;可以手工添加任务、队列、信号量、互斥锁、定时器等等。但是本课程不想严重依赖STM32CubeMX&#xff0c;所以不会使用STM32CubeMX来添加这些对象&#xff0c;而是手写代码来使用这些对象。 使用STM32CubeMX时&…...

编程日记 2025/7/10 12:14:53

Vmware esxi 给现有磁盘增加空间后并扩展系统里磁盘空间

当前EXSI上虚拟机所在的单独数据磁盘空间满了&#xff0c;需要对空间进行扩容&#xff0c;我们先在主机对磁盘容量进行调整&#xff0c;然后在系统里面对磁盘空间进行拓展&#xff0c;这些操作需要保留数据并且不改变现有的磁盘格局。 遵循大致操作流程是&#xff1a; 1.先登录…...

编程日记 2025/7/10 7:54:33

Linux基础学习--linux的文件权限与目录配置

linux的文件权限与目录配置 1.用户与用户组 在Linux中&#xff0c;每个文件都有相当多的属性和权限&#xff0c;其中最重要的概念就是文件的拥有者。 1.1 文件拥有者 Linux是一个多人多任务的系统&#xff0c;常常有多人共用一台主机的情况出现&#xff0c;因此在系统中可以…...

编程日记 2025/7/19 11:42:35

LLM大模型中的基础数学工具—— 约束优化

Q26: 推导拉格朗日乘子法 的 KKT 条件 拉格朗日乘子法与 KKT 条件是啥&#xff1f; 拉格朗日乘子法是解决约束优化问题的利器。比如&#xff0c;想最小化函数 &#xff0c;同时满足约束 &#xff0c;就构造拉格朗日函数 &#xff08; 是乘子&#xff09;。KKT 条件是解这类问…...

编程日记 2025/7/10 11:35:01

涨薪技术|0到1学会性能测试第20课-关联技术

前面的推文我们掌握了性能测试脚本开发参数化技术一系列知识，今天开始给大家分享关联技术知识，后续文章都会系统分享干货，带大家从0到1学会性能测试！ 关联是LoadRunner中一个很重要的应用，对于初学者来说也是最容易犯错的地方，但是很遗憾的是，并没有任何特定的错误与关联…...

编程日记 2025/7/2 23:47:54

SpringAI入门示例

AI编程简介 纯Prompt模式 纯Prompt模式是AI编程中最基础的交互架构。用户通过输入自然语言文本&#xff08;即Prompt&#xff09;向AI模型发出指令&#xff0c;模型依据自身预训练所积累的知识和语言理解能力&#xff0c;直接生成相应的文本响应。其工作原理是&#xff0c;用…...

编程日记 2025/7/21 18:10:39

SQL 中 ROLLUP 的使用方法

ROLLUP 是 SQL 中一种分组操作&#xff0c;它生成多个分组集的小计行和总计行&#xff0c;提供层次化的汇总数据。 基本语法 SELECT column1, column2, ..., aggregate_function(column) FROM table GROUP BY ROLLUP (column1, column2, ...); 使用示例 假设有一个销售表 sal…...

编程日记 2025/7/20 17:27:06

Web前端：Overflow属性（超出裁剪属性）

一、什么是 Overflow&#xff1f; 在网页布局中&#xff0c;容器&#xff08;如 <div>、<section> 等&#xff09;通常有固定尺寸&#xff08;如 width 和 height&#xff09;。当容器内的内容&#xff08;文本、图片等&#xff09;超出容器边界时&#xff0c;就会…...

编程日记 2025/7/21 22:28:37

20250421在荣品的PRO-RK3566开发板的Android13下使用io命令控制GPIO

20250421在荣品的PRO-RK3566开发板的Android13下使用io命令控制GPIO 2025/4/21 10:44 【本文只打开了io命令。通过io控制GPIO放到下一篇了】 缘起&#xff1a;需要在荣品的PRO-RK3566开发板的Android13的u-boot中来控制GPIO3A1【配置以太网RTL8211F-CG】。 直接使用GPIO库函数 …...

编程日记 2025/7/2 23:31:06

20250421在荣品的PRO-RK3566开发板的Android13下频繁重启RKNPU fde40000.npu: Adding to iommu gr

20250421在荣品的PRO-RK3566开发板的Android13下频繁重启RKNPU fde40000.npu: Adding to iommu gr 2025/4/21 14:50 缘起&#xff1a;电池没电了&#xff0c;导致荣品的PRO-RK3566的核心板频繁重启。 内核时间4s就重启。100%复现。 PRO-RK3566 Android13启动到这里 复位&#…...

编程日记 2025/6/29 9:44:47

在 8MHz 的时钟电路中挂接电阻，电容

匹配电阻&#xff1a;在晶体振荡电路中&#xff0c;用于匹配晶体和振荡电路的阻抗&#xff0c;确保振荡的稳定性&#xff0c;阻值通常在几十千欧到几百千欧&#xff0c;例如 1MΩ、33KΩ、47KΩ 等。 在一些电子电路中&#xff0c;尤其是涉及到时钟信号的产生和传输时&#xf…...

编程日记 2025/7/11 15:18:19

卸载工具：IObit Uninstaller Pro v14.3.0 中文绿色专业便携版

IObit Uninstaller 是一种功能强大的卸载工具&#xff0c;可帮助您快速方便地从计算机中移除不需要的程序和文件夹。它不仅仅可以从计算机中卸载应用程序&#xff0c;还可以移除它们的卸载残留。可以检测和分类所有已安装的程序&#xff0c;并可以批量卸载&#xff0c;只需一键…...

编程日记 2025/7/11 14:48:32

【目标检测】目标检测综述 目标检测技巧

I. 目标检测中标注的关键作用 A. 目标检测数据标注的定义 目标检测是计算机视觉领域的一项基础且核心的任务&#xff0c;其目标是在图像或视频中准确识别并定位出预定义类别的目标实例 1。数据标注&#xff0c;在目标检测的语境下&#xff0c;指的是为原始视觉数据&#xff0…...

编程日记 2025/7/22 13:32:38

c++基础·move作用，原理

目录 一、代码结构概览 二、逐层解析实现逻辑 1. 模板参数推导 2. 返回类型设计 3. 类型转换逻辑 三、关键特性与设计思想 1. 移动语义的本质 2. 为何必须用 remove_reference 3. 万能引用的兼容性 四、边界场景与注意事项 1. 对 const 对象的处理 2. 返回值优化&a…...

编程日记 2025/7/11 17:07:34

考研系列-计算机网络-第四章、网络层

一、网络层的概述和功能 1.功能概述 2.SDN的基本概念...

编程日记 2025/7/7 9:38:45

服务器在国外国内用户访问慢会影响谷歌排名吗？

谷歌明确将“页面加载速度”和“用户体验”作为排名核心指标&#xff0c;但当服务器物理距离过远时&#xff0c;国内用户动辄3秒以上的加载延迟&#xff0c;可能导致跳出率飙升、爬虫抓取困难等连锁反应。 但盲目将服务器迁回国内&#xff0c;又会面临备案成本、运维门槛等新难…...

编程日记 2025/7/2 6:18:36

iFable，AI角色扮演互动平台，自动生成沉浸式故事游戏

iFable是什么 iFable 是一个以动漫角色为主题的互动角色扮演游戏平台&#xff0c;旨在为用户提供沉浸式的故事冒险体验。平台允许玩家通过简单的创意输入&#xff0c;利用AI技术生成独特的互动故事与游戏体验。iFable 的设计宗旨在于帮助玩家与虚拟角色建立情感连接&#xff0…...

编程日记 2025/7/23 8:38:58

Nginx反向代理用自定义Header参数

【啰嗦两句】 也不知道为啥&#xff0c;我仅仅想在Nginx的反向代理中使用自己定义的“x-api-key”做Header参数&#xff0c;却发现会被忽略&#xff0c;网上搜的资料都是说用“proxy_set_header”&#xff0c;却只愿意介绍最基本的几个参数&#xff0c;你懂的&#xff0c;那些资…...

编程日记 2025/7/18 22:45:19

Spark SQL概述（专业解释+生活化比喻）

专业解释 一、什么是Spark SQL&#xff1f; 一句话定义&#xff1a; Spark SQL是Apache Spark中专门处理结构化数据的模块&#xff0c;可以让你像操作数据库表一样处理数据&#xff0c;支持用SQL查询或编程API&#xff08;DataFrame/DataSet&#xff09;分析数据。 通俗理解…...

编程日记 2025/7/16 3:39:09

LX3-初识是单片机

初识单片机 一 什么是单片机 单片机:单片微型计算机单片机的组成:CPU,RAM(内存),flash(硬盘),总线,时钟,外设…… 二 Coretex-M系列介绍 了解ARM公司与ST公司ARM内核系列: A 高性能应用,如手机,电脑…R 实时性强,如汽车电子,军工…M 超低功耗,如消费电子,家电,医疗器械 三…...

编程日记 2025/7/2 19:58:58

第二章 Logback的架构（一）

Logback的架构 Logback作为一个通用框架&#xff0c;可以应对不同场景的日志记录。目前&#xff0c;Logback 被划分为三个模块&#xff1a;logback-core、logback-classic 和 logback-access。 Logback的core模块为其他两个模块提供基础支持。classic模块扩展了core模块&…...

编程日记 2025/7/12 1:42:25

开发指南：构建结合数字孪生、大语言模型与知识图谱的智能设备日志分析及生产异常预警系统

1. 引言&#xff1a;数字孪生、大语言模型与知识图谱在智能制造中的融合 智能制造和工业4.0的浪潮正在重塑全球制造业格局&#xff0c;其核心在于利用先进的数字技术实现生产过程的实时决策、效率提升、灵活性增强和敏捷性改进。在这一转型过程中&#xff0c;数字孪生&#xf…...

编程日记 2025/7/7 23:35:28

【TeamFlow】4.1 Git使用指南

以下是 Git 在 Windows 系统上的配置和使用指南&#xff0c;包含详细步骤和注意事项&#xff1a; 安装 Git for Windows 下载与安装 前往 Git 官网 下载 Windows 版安装包 双击安装&#xff0c;关键选项建议&#xff1a; 选择 Use Git from Git Bash only&#xff08;推荐&…...

编程日记 2025/7/11 17:54:08

HADOOP 3.4.1安装和搭建（尚硅谷版~）

目录 1.配置模版虚拟机 2.克隆虚拟机 3.在hadoop102安装JDK 4.完全分布式运行模式 1.配置模版虚拟机 1.安装模板虚拟机&#xff0c;IP地址192.168.10.100、主机名称hadoop100、内存2G、硬盘20G&#xff08;有需求的可以配置4G内存&#xff0c;50G硬盘&#xff09; 2.hado…...

编程日记 2025/7/1 23:30:29

通过Docker Desktop配置OpenGauss数据库的方法(详细版+图文结合）

文章目录 通过Docker Desktop配置OpenGauss数据库的方法**一、下载Docker Desktop&#xff0c;并完成安装**docker官网&#xff1a;https://www.docker.com/ **二、下载OpenGauss压缩包**安装包下载链接&#xff1a;https://opengauss.obs.cn-south-1.myhuaweicloud.com/7.0.0-…...

编程日记 2025/7/13 14:28:07

文件有几十个T，需要做rag，用ragFlow能否快速落地呢？

一、RAGFlow的优势 1、RAGFlow处理大规模数据性能&#xff1a; &#xff08;1&#xff09;、RAGFlow支持分布式索引构建&#xff0c;采用分片技术&#xff0c;能够处理TB级数据。 &#xff08;2&#xff09;、它结合向量搜索和关键词搜索&#xff0c;提高检索效率。 &#xf…...

编程日记 2025/7/5 19:54:35

SystemVerilog语法之内建数据类型

简介&#xff1a;SystemVerilog引进了一些新的数据类型&#xff0c;具有以下的优点&#xff1a;&#xff08;1&#xff09;双状态数据类型&#xff0c;更好的性能&#xff0c;更低的内存消耗&#xff1b;&#xff08;2&#xff09;队列、动态和关联数组&#xff0c;减少内存消耗…...

编程日记 2025/6/29 9:44:41

TensorFlow和PyTorch学习原理解析

这里写目录标题 TensorFlow和PyTorch学习&原理解析TensorFlow介绍原理部署适用场景 PyTorch介绍原理部署适用场景 Keras模型格式SavedModelONNX格式 TensorFlow和PyTorch学习&原理解析 TensorFlow 介绍 由 Google Brain 团队开发并于 2015 年开源。由于 Google 的强…...

编程日记 2025/7/10 15:25:17

悬空引用和之道、之禅-《分析模式》漫谈57

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 “Analysis Patterns”的第5章“对象引用”原文&#xff1a; Unless you can catch all such references, there is the risk of a dangling reference, which often has painful con…...

编程日记 2025/7/10 23:13:39

江湖密码术：Rust中的 bcrypt 加密秘籍

前言 江湖险恶，黑客如雨，昔日密码“123456”早被各路大侠怒斥为“纸糊轻功”。若还执迷不悟，用明文密码闯荡江湖，无异于身披藏宝图在集市上狂奔，目标大到闪瞎黑客双眼。 为护你安然度过每一场数据风波，特献上一门绝学《Rust加密神功》。核心招式正是传说中的 bcrypt 密…...

编程日记 2025/6/29 11:15:12

NLP高频面试题（四十八）大语言模型中的思维链（CoT）技术详解

引言 大语言模型（LLM）在近年的飞速发展，让机器在各种任务上表现出令人瞩目的能力。然而，与人类不同，传统的语言模型往往倾向于直接给出答案，而缺乏可解释的中间推理过程。这在复杂推理任务中成为瓶颈：模型可能由于一步推理不当而得出错误结论，却没有过程可供检查。为了…...

编程日记 2025/7/4 11:43:13

对接点餐接口需要有哪些准备？

以下是一般点餐接口对接的相关信息&#xff0c;包括常见的接口功能、对接步骤及注意事项等&#xff1a; 常见接口功能 餐厅信息查询&#xff1a;获取合作餐厅的基本信息&#xff0c;如餐厅名称、地址、营业时间、联系电话、菜单等。菜品查询&#xff1a;查询具体餐厅的菜品详情…...

编程日记 2025/7/16 14:49:29

LintCode第192题-通配符匹配

描述 给定一个字符串 s 和一个字符模式 p &#xff0c;实现一个支持 ? 和 * 的通配符匹配。匹配规则如下&#xff1a; ? 可以匹配任何单个字符。* 可以匹配任意字符串&#xff08;包括空字符串&#xff09;。 两个串完全匹配才算匹配成功。 样例 样例1 输入: "aa&q…...

编程日记 2025/7/9 17:10:05

uv运行一个MCP Server的完整流程

uv是一个高性能的Python包管理器&#xff0c;专注于性能提升。与pip相比&#xff0c;uv利用全局模块缓存&#xff0c;减少磁盘空间使用&#xff0c;并支持Linux、Windows和macOS系统。安装uv可以通过多种方式实现&#xff0c;例如使用Homebrew、Pacman、pip等。 step 1 安装uv:…...

编程日记 2025/6/29 11:15:54

ts中的类型

在 TypeScript 中&#xff0c;类型是静态类型系统的核心&#xff0c;用于在编译阶段检查代码的正确性。TypeScript 提供了丰富的类型系统&#xff0c;包括基本的原始类型、复合类型、以及用户自定义的类型。以下是对 TypeScript 中各种类型的详细分类和说明&#xff1a; 1. 原…...

编程日记 2025/7/22 18:36:04

把dll模块注入到游戏进程的方法_基于文件修改的注入方式

1、概述 本文主要是介绍两种基于文件修改的注入方式，一种是“DLL劫持”，另一种是“修改导入表”。这两种注入方式都是利用操作系统加载PE时的特点来实现的，我们在实现这两种注入方式时只需专注于注入dll的实现，而不用花费额外的精力去关注注入器的实现。要想深入了解这两种…...

编程日记 2025/7/19 11:39:29