Отображать ссылки из сообщения как ссылку

Question

Я пытаюсь воспроизвести любое вхождение ссылки в тексте как ссылку, но я получаю его только для отображения <a href="example.com">example.com</a> как текста в сообщении. (Для ясности, он показывает другое содержимое сообщения, если в сообщении есть другое содержимое, чем ссылка, но ссылка становится «связанной (как показано ниже)»)

Вот компонент сообщения.

import React from "react";
import moment from "moment";
import { Comment, Image } from "semantic-ui-react";

const isOwnMessage = (message, user) => {
  return message.user.id === user.uid ? "message__self" : "";
};

const isImage = message => {
  return message.hasOwnProperty("image");
};

const timeFromNow = timestamp => moment(timestamp).fromNow();

function linkify(text) {
  var urlRegex =/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
  return text.replace(urlRegex, function(url) {
      return '<a href="' + url + '">' + url + '</a>';
  });
}

const Message = ({ message, user }) => (
  <Comment>
    <Comment.Avatar src={message.user.avatar} />
    <Comment.Content className={isOwnMessage(message, user)}>
      <Comment.Author as="a">{message.user.name}</Comment.Author>
      <Comment.Metadata>{timeFromNow(message.timestamp)}</Comment.Metadata>
      {isImage(message) ? (
        <Image src={message.image} className="message__image" />
      ) : (
        <div>
<Comment.Text>{linkify(message.content)}</Comment.Text>
        <React.Fragment dangerouslySetInnerHTML={linkify(message.content)}>
        </React.Fragment>
        </div>
      )}
    </Comment.Content>
  </Comment>
);

export default Message;

Answer 1

1. опасноSetInner HTML prop нужен объект со свойством __html
2. не используйте React.Fragment при использовании dangerousSetInner HTML. Просто используйте div

Рабочая демонстрация

Фрагмент кода

function linkify(text) {
  var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi;
  return text.replace(urlRegex, function(url) {
    return '<a href="' + url + '">' + url + "</a>";
  });
}
const text = `I'm trying to replay any occurrence of a link in a text as a link, but I only get it to show the <a href="example.com">example.com</a> as text in the message. (Just to be clear, it shows other message content if there is other content in the message than the link, but the link gets "linkified(as seen below)")`;
export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <br />
      <div dangerouslySetInnerHTML={{ __html: linkify(text) }} />; }
    </div>
  );
}

Answer 2

вам лучше сначала обработать свою url переменную своим регулярным выражением, а затем вернуть как действительный элемент реакции:

function linkify(text) {
  const urlRegex =/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
  // extract your url by urlRegex something like
  const url = text.match(urlRegex)[0]
  return <a href={url} >{url}</a>
}