react-highlight-words源码解析

最新推荐文章于 2024-09-13 22:55:35 发布

weixin_34221773

最新推荐文章于 2024-09-13 22:55:35 发布

阅读量898

点赞数

文章标签： javascript 数据结构与算法 ViewUI

原文链接：https://segmentfault.com/a/1190000013562321

版权

本文详细解析了react-highlight-words库的源码思路，重点介绍了如何将句子划分为高亮和未高亮部分，并通过数据结构进行标识。同时，概述了highlight-words-core模块，它提供了多个工具函数，如findAll、combineChunks等，这些函数按照特定顺序协同工作来实现高亮功能。

摘要由CSDN通过智能技术生成

react-highlight-words

https://github.com/bvaughn/re...

一个React组件，用处：在一段文本中高亮展示某些单词

源码思路

直接返回一个函数式组件

最重要是调用findAll函数，返回[{start: startIndex, end: endIndex, highlight: boolean}, {同样的结构}]，将一段句子合理的划分为从前到后的高亮部分和未高亮部分
然后遍历chunks，返回高亮和未高亮两种不同的DOM结构

==核心就是将高亮部分和未高亮部分通过数据结构（对象数组）进行标识和区分，便于后续的处理==

findAll函数是highlight-words-core模块提供的工具方法，所有后面会讲解这个模块。

/* @flow */
import { findAll } from 'highlight-words-core'
import PropTypes from 'prop-types'
import React from 'react'

Highlighter.propTypes = {
  activeClassName: PropTypes.string,
  activeIndex: PropTypes.number,
  activeStyle: PropTypes.o