ReactJS - <Linkify> 和 <Highlighter> 组件不能一起工作

Posted 2023-05-09

【中文标题】ReactJS - <Linkify> 和 <Highlighter> 组件不能一起工作

【英文标题】：ReactJS - <Linkify> and <Highlighter> components don't work together

【发布时间】：2020-04-20 06:58:39

【问题描述】：

在我当前的 ReactJS 作业中，我被要求渲染一个包含 url 地址的字符串， 所以这些 url 将是可点击的链接，并且文本将被搜索词突出显示。

因此，我制作了一个导入“react-linkify”和“react-highlight-words”组件的组件。

如果我单独使用组件，那么 url 地址将被转换为可点击的链接。 因此，对于作为自己的组件，文本将按预期通过搜索词突出显示。

当我同时使用它们时，组件功能可以工作，但是 该组件不会将 url 呈现到链接。

我已经尝试了所有可以在 Google 中搜索到的解决方案，甚至使用正则表达式制作了我自己的链接，但链接仍然保留为字符串，而不是呈现为可点击的链接。

我来自 CodeSandBox.io 的代码：

import React from "react";
import ReactDOM from "react-dom";
import Linkify from "react-linkify";
import Highlighter from "react-highlight-words";

import "./styles.css";

function App() 
  let text =
    "Hello CodeSandbox. Start editing to see some magic happen! Click to see this video: https://www.youtube.com/watch?v=VMcPWuQ7IeE ";

  return (
    <div className="App">
      <Linkify>
        <Highlighter
          highlightClassName="YourHighlightClass"
          searchWords=["magic", "video"]
          autoEscape=true
          textToHighlight=text
        />
      </Linkify>
    </div>
  );


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我是 React 的新手，如果你能在这个问题上帮助我，我将不胜感激。

【问题讨论】：

嘿，您通过另一种方式链接它，即带有自定义文本的超链接。点击链接可能会对您有所帮助github.com/obipawan/react-native-hyperlink

不幸的是，我已经尝试过了，但它不起作用。

【参考方案1】：

您可以改进它，但我只是设法使某些东西以这种方式工作： 1. 在 Highlighter 的 searchWords 数组中添加“http”。 2. 使用 findChunks 选择从开始到下一个空格字符的完整单词。因此，例如任何像“https://codesandbox.io/s/k20x3ox31o”这样的网址都会完全突出显示。 3. 使用自定义 highlightTag 将突出显示的单词包裹在 Linkify 中。

const findChunks = (
    autoEscape,
    caseSensitive,
    sanitize,
    searchWords,
    textToHighlight
  ) => 
    const chunks = [];
    const textLow = textToHighlight.toLowerCase();
    const sep = /[\s]+/;

    const singleTextWords = textLow.split(sep);

    let fromIndex = 0;
    const singleTextWordsWithPos = singleTextWords.map(s => 
      const indexInWord = textLow.indexOf(s, fromIndex);
      fromIndex = indexInWord;
      return 
        word: s,
        index: indexInWord
      ;
    );

    searchWords.forEach(sw => 
      const swLow = sw.toLowerCase();
      singleTextWordsWithPos.forEach(s => 
        if (s.word.includes(swLow)) 
          const start = s.index;
          const end = s.index + s.word.length;
          chunks.push(
            start,
            end
          );
        
      );
    );

    return chunks;
  ;

/******************************************************/

<Highlighter
  highlightClassName="YourHighlightClass"
  textToHighlight=message.text
  searchWords=['http']
  autoEscape=true
  findChunks=findChunks
  highlightTag=( children, highlightIndex ) => (
    <Linkify><span style=backgroundColor: 'crimson', color: 'white'>children</span></Linkify>
)/>