Любая помощь по этому поводу будет оценена. У меня есть блоки текста со ссылками, и я использовал компонент React linkifyjs, чтобы автоматически заключать ссылки в теги привязки. Однако теперь я хотел бы отображать кнопку рядом с каждой ссылкой с некоторым настраиваемым поведением. Есть ли способ обернуть ссылки в пользовательский компонент, скажем что-то вроде этого?

function CustomLink(props) {
  return (
    <>
      <a href={props.link}>{props.text}</>
      <button>Click me</button>
    </>
  )
}

Я знаю, что могу передать что-то вроде tagName: 'strong' в объекте параметров, но это не позволит мне передать пользовательский элемент React. Я получаю сообщение об ошибке, если пытаюсь сделать что-то вроде этого (что работает для встроенных тегов, например 'strong'):

// error => Element type is invalid: expected a string (for built-in components) or a
// class/function (for composite components) but got: object.

function CustomLink(link) {
  console.log(link)
  return (
    <a href={link}>{link}</a>
  )
}

function TextWithLinks(props) {
  return (
    <Linkify className="d-inline" options={{tagName: CustomLink}}>
      {props.text}
    </Linkify>
  )
}

Спасибо за любую помощь!

1
eberleant 13 Фев 2021 в 02:51

1 ответ

Лучший ответ

Используйте параметр format и передайте ему функцию.

function CustomLink({link}) {
    return (
        <>
            <a href={link}>{link}</a>
            <button>Click Me</button>
        </>
    )
}

function TextWithLinks(props) {

    function formatter(value, type) {
        return <CustomLink link={value}/>
    }

    return (
        <Linkify className="d-inline" options={{tagName: 'div', format: formatter }}>
            {props.text}
        </Linkify>
    )
}

1
MrBrN197 13 Фев 2021 в 00:31