typescript - <use> 标签上的 xlink:href 属性在 tsx 文件中使用时会抛出 typescript 错误

Question

我有一个简单的代码，其中包含带有 <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 特定的解决方案，但我得到的只是它是 xLinkHref在 React 中，这在这种情况下不起作用。

有具体的方法吗？

Answer 1

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

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

可能是因为您错过了结束标记。