技术指南：React 组件开发实战 - 打造文字高亮功能组件

2023-09-15 00:09:41

组件开发实战 - 文字高亮组件

在现代网络应用中，文字高亮功能十分常见，它能够帮助用户快速定位相关信息，提升用户体验。本文将手把手指导您使用React构建一个文字高亮组件，让您轻松实现这一功能。

前提准备

在开始之前，确保您已具备基本的React开发知识，并已安装好Node.js和相关开发工具。

创建 React 组件

首先，创建一个新的React项目，然后在src目录下创建一个新的组件文件，例如HighlightText.js。

import React, { useState } from "react";

const HighlightText = (props) => {
  const [text, setText] = useState(props.text);
  const [keywords, setKeywords] = useState([]);

  const handleChange = (event) => {
    setText(event.target.value);
  };

  const handleKeywordsChange = (event) => {
    setKeywords(event.target.value.split(","));
  };

  const highlightText = (text, keywords) => {
    let highlightedText = text;
    keywords.forEach((keyword) => {
      const regex = new RegExp(keyword, "gi");
      highlightedText = highlightedText.replace(regex, `<span class="highlight">${keyword}</span>`);
    });
    return highlightedText;
  };

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} placeholder="Enter text here" />
      <input type="text" value={keywords} onChange={handleKeywordsChange} placeholder="Enter keywords separated by commas" />
      <p dangerouslySetInnerHTML={{ __html: highlightText(text, keywords) }} />
    </div>
  );
};

export default HighlightText;

使用组件

在您的 React 应用中，您可以通过以下方式使用这个组件：

import HighlightText from "./HighlightText";

const App = () => {
  return (
    <div>
      <h1>Text Highlighter</h1>
      <HighlightText text="This is some text to be highlighted." />
    </div>
  );
};

export default App;