React：在<li>

Question

我有这个组件：

const Candidate = ({candidate}) => {
    return(
        <li href='http://www.google.com' key={candidate.id}>{candidate.first} {candidate.last} ({candidate.company}) </li>
    )
}

但看起来我无法将<li>变成可点击的链接？我将其更改为<a href=''>并且有效。

这项工作的最佳方法是什么？

Answer 1

为什么不做<li><a href=""> </a> </li>？因为你正在建立一个链接，我会做得更好。将href添加到<a>标记。

Answer 2

您可以使用简单的锚标记

const Candidate = ({candidate}) => {
    return(
        <li key={candidate.id}>
          <a href='http://www.google.com'>{candidate.first} {candidate.last} ({candidate.company})</a>
        </li>
    )
}

或者，如果您正在使用react-router，请查看链接组件的文档：https://reacttraining.com/react-router/web/example/custom-link