在 React 中创建广义锚标记

Question

在 HTML 中，我们经常在 <p> 标记中编写内容，当我们希望将文本的某些部分作为链接时，我们用 <a> 标记将该部分括起来，并带有 href 属性。

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

我正在尝试在 React 中做类似的事情，但无法真正弄清楚如何以合理的方式去做。

我有一个<P> 组件，它有一个点击处理程序。这个点击处理程序被一个唯一的引用触发，然后更新<P> 的状态。 <P> 组件有一些文本作为子项，在该文本中，我想用 <A> 标记包含一些文本，该标记将采用唯一引用作为道具，当单击该文本时，它会触发 @987654329 中的单击处理程序@。

<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> 标签，并且每次将点击处理程序作为道具传递似乎有点做作，就像我们需要将一些点击处理程序传递给我们所有的 @ HTML 中的 987654335@ 标记。所以虽然它有效，但它似乎有点“代码味道”，会使文件看起来很乱。所有的<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>
}