使用 TSX 语法时如何在 HTML 跨度中使用 href？

Question

我是使用 Typescript 和 React 的新手，如果这是一个新手问题，我很抱歉。 在我的代码中，我有以下几行：

<p><span href="#" id="nsTool" style={{color:"white", width: "50px"}}> Namespace </span></p>

当代码仅使用 Javascript/React 时，这最初工作正常，但是当我将文件转换为 .tsx (Typescript) 时，出现以下错误：

Type '{ children: string[]; href: string; id: string; style: { color: string; width: string; }; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>'.
  Property 'href' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>'.

这是否意味着我不能在 span 元素中使用 href ？ 我该如何解决这个问题？

Answer 1

HTML span元素只允许全局属性。 因此href属性不会对span产生影响，因此您会收到 Typescript 错误。

注意： href属性通常只在anchor element上找到

Answer 2

<span>标签没有href属性。 您可以像这样附加带有锚标记的 span 标记：

<span>
    :&nbsp; 
    <a href="#">
        Namespace
    </a>
</span>