Создать тег Generalized Anchor в React

Question

В HTML мы часто пишем контент в теге <p>, и когда мы хотим, чтобы какая-то часть текста действовала как ссылка, мы заключаем эту часть в теги <a> с атрибутом href.

<p>Click <a href='./path/to/page'>me</a></p>

Я пытаюсь сделать что-то подобное в React, но не могу понять, как это сделать разумным способом.

У меня есть компонент <P> с обработчиком кликов . Этот обработчик кликов запускается с уникальной ссылкой, которая затем обновляет состояние <P>. Компонент <P> имеет некоторый текст в качестве дочерних элементов, и в этом тексте я хочу заключить некоторый текст с тегами <A>, которые будут принимать уникальную ссылку в качестве опоры, и при нажатии этого текста он запускает обработчик кликов в <P>.

<P>Click <A uniqueRef='foo'>me</A></P>

const A = ({children, uniqueRef}) => {
  const handleClick = () => {
    //fireClickHandlerInP(uniqueRef)
  }
  return <a onClick={handleClick}>{children}</a>
}

По сути, я пытаюсь создать обобщенный тег привязки, который вместо того, чтобы открывать новую страницу при нажатии, обновляет состояние компонента в React.

Но как это сделать? Я сделаю это? Как я могу сделать так, чтобы тег <A> запускал обработчик кликов в <P> разумным образом?

Мне удалось выполнить это, просто передав <A> обработчик кликов в качестве опоры вместе с его ссылка. Однако в данном контексте это кажется глупым вариантом. У меня очень большой файл, для которого потребуется много тегов <A>, и передача обработчика кликов в качестве опоры каждый раз кажется немного надуманной, как если бы нам нужно было передать обработчик кликов всем нашим <a> тегов в HTML. Так что, хотя это работает, кажется, что это немного «запах кода», и файл будет выглядеть очень беспорядочно. Все теги <A> также используются в другом файле, поэтому засорять его реквизитами другого компонента кажется нелогичным.

Answer 1

Попробуйте это

<P>Click <A uniqueRef='foo'>me</A></P>

const A = ({children, uniqueRef}) => {
  const handleClick = () => {
    //fireClickHandlerInP(uniqueRef)
  }
  return <a onClick={()=> this.handleClick()}>{children}</a>
}