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

【问题标题】：ReactJS - <Linkify> and <Highlighter> components don't work togetherReactJS - <Linkify> 和 <Highlighter> 组件不能一起工作
【发布时间】：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
不幸的是，我已经尝试过了，但它不起作用。

标签： javascript reactjs url components linkify

【解决方案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>
)}/>

【讨论】：