perf: 优化Highlight组件

huangmingfu · Dec 11, 2024 · 579f461 · 579f461
1 parent f0ccc3f
commit 579f461
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/src/components/high-light/index.scss b/src/components/high-light/index.scss
@@ -0,0 +1,4 @@
+.highlight {
+  font-weight: bold;
+  background-color: unset;
+}
diff --git a/src/components/high-light/index.tsx b/src/components/high-light/index.tsx
@@ -1,11 +1,19 @@
-import React from 'react';
+import React, { memo } from 'react';
 
-export default function Highlight({
+import classnames from 'classnames';
+
+import './index.scss';
+
+function Highlight({
   children,
-  keys
+  keys,
+  color = '#FFDA00',
+  className
 }: {
   children: React.ReactNode;
   keys: string[];
+  color?: string;
+  className?: string;
 }) {
   const string = React.Children.toArray(children).join('');
   const reg = new RegExp(keys.join('|'), 'g');
@@ -14,11 +22,13 @@ export default function Highlight({
     index % 2 === 0 ? (
       x
     ) : (
-      <mark key={index} className="highlight">
+      <mark key={index} className={classnames('highlight', className)} style={{ color }}>
         {x[0] === '@' ? x.slice(1) : x}
       </mark>
     )
   );
 
   return <>{elements}</>;
 }
+
+export default memo(Highlight);