<use> 标签上的 xlink:href 属性在 tsx 文件中使用时会引发打字稿错误

Posted 2023-02-21

【中文标题】<use> 标签上的 xlink:href 属性在 tsx 文件中使用时会引发打字稿错误

【英文标题】：xlink:href attribute on <use> tag throws typescript error when used in tsx file

【发布时间】：2018-09-28 07:22:30

【问题描述】：

我有简单的代码，其中包含带有<use> 标记的 svg 图标到使用 stencjiljs（tsx 语法）创建的 Web 组件中。但是，当我将xlink:href 属性添加到<use> 标记时，我收到错误Identifier expected。

Example code: 
import  Component, Prop  from '@stencil/core';

@Component(
   tag: 'example-component',
   styleUrl: 'example-component.scss',
)

 export class ExampleComponent 
     render() 
        return (
            <svg>
                <use href="#iconid" xlink:href="#iconid"/>
            </svg>
       );
    

我厌倦了搜索 tsx/jsx 特定的解决方案，但我得到的只是 React 中的 xLinkHref，在这种情况下不起作用。

我有具体的方法吗？

【参考方案1】：

这个对我来说很好用。我的组件扩展是.tsx

<use href="#iconid" xlinkHref="#iconid"/></use>

可能是因为你错过了结束标签。

【讨论】：

标签是自封闭的。但我注意到我使用的是xLinkHref 而不是xlinkHref。后者实际上是渲染到href 而不是xlink:href。但感谢您指出！

为我工作。这似乎应该是公认的答案@niemaszoka

【参考方案2】：

看起来 Typescript 不支持命名空间属性：https://github.com/Microsoft/TypeScript/issues/7411

我建议跳过 JSX 并使用原始 JSX 组件工厂。 在 React 中，人们会像这样使用React.createElement：

<use>
    React.createElement('use', href:"#iconid", "xlink:href": "#iconid")
</use>

不知道 stenciljs 工厂是如何命名的，但如果它与 JSX 兼容，它的 createElement 必须具有与上面显示的非常相似的 API。

（编辑：s/createComponent/createElement/g）