ReactJS- 和 组件不能一起使用

Question

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

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

如果我单独使用组件，则网址将转换为可点击的链接。因此，对于组件本身，文本将按预期由搜索词突出显示。

当我同时使用它们时，组件功能正常，但是该组件不会呈现链接的网址。

我已经尝试过我可以在Google中搜索的所有解决方案，甚至使用正则表达式创建自己的linkify，但是这些链接仍然保持字符串形式，而不是呈现为可点击的链接。

我来自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的新人，如果您能在此问题上为我提供帮助，我将非常感激。

Answer 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>
)}/>