React -自定义Mark组件实现搜索结果关键字强调色

实现搜索结果关键字强调色展示

// 关键字强调色
import React from 'react';

export const Mark = ({ name, keyWord }: { name: string; keyWord: string }) => {
  if (!keyWord) {
    return <>{name}</>;
  }
  const arr = name.split(keyWord);
  return (
    <>
      {arr.map((str, index) => (
        <span key={index}>
          {str}
          {index === arr.length - 1 ? null : <span style={{ color: '#257AFD' }}>{keyWord}</span>}
        </span>
      ))}
    </>
  );
};