Как рендерить текст с ссылкой в React?

Question

У меня есть некоторый лог, который я передаю на клиент:

{
  "color": "var(--mantine-color-green-7)",
  "text": "Процесс запущен"
},
{
  "color": "var(--mantine-color-green-7)",
  "text": "Опубликовано в @club123 (группе)"
}

Как мне его зарендерить, заменив @club123 (группе) на компонент с ссылкой

<Anchor href={`https://vk.com/club123 `} target="_blank" c="blue">группе</Anchor>

Была такая идея:

function parseLineFromFullLog(lineObj) {
    const {color,text} = lineObj
    const linkRegex = /@(club\d+) \(([^)]+)\)/g;
    const linkRegexResult = linkRegex.exec(text)
    
    let resultComponent = <>{text}</>
    if (linkRegexResult) {
        const [fullLink, link, name] = linkRegexResult
        resultComponent = <>{text.replace(fullLink, <Anchor href={`https://vk.com/${link}`} target="_blank" c="blue">{name}</Anchor>)}</>
    }

    return <div style={{ color: color }}>{resultComponent}</div>
}

Но он выводит вместо ссылки [object Object]. Хоть весь лог и собирается на сервере, но все равно не хочется использовать dangerouslySetInnerHTML. Как мне реализовать такую замену ссылки?

Answer 1

Проблему решил с библиотекой https://github.com/appfigures/string-replace-to-array

import replace from 'string-replace-to-array';

function parseLineFromFullLog(lineObj) {
    const {color,text} = lineObj
    const linkRegex = /@(club\d+) \(([^)]+)\)/g;

    const replacedText = replace(text, linkRegex, (fullMatch, link, title, offset, string) => {
        return <Anchor href={`https://vk.com/${link}`} target="_blank">{title}</Anchor>
    });
    return (
        <div style={{color}}>{replacedText}</div>
    )
}

Answer 2

function parseLineFromFullLog(lineObj) {
    const {color, text} = lineObj
    const linkRegex = /(@club\d+ \([^)]+\))/g;
    const textSplit = text.split(linkRegex);
    const linkRegexResult = textSplit.map((value, index) => {
        const matches = value.match(/@(club\d+) \(([^)]+)\)/);
        if (matches) {
            const [, link, name] = matches;
            return <Anchor href={`https://vk.com/${link}`} target="_blank" c="blue" key={index}>{name}</Anchor>
        }else{
            return value
        }
    })
    
    return <div style={{ color: color }}>{linkRegexResult}</div>;
}

БЛОГ НА HUSL

Как рендерить текст с ссылкой в React?

Ответы (2 шт):