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特定的解决方案，但我得到的只是它在React中的xLinkHref，在这种情况下不起作用。

我有具体办法吗？

Answer 1

看起来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必须与上面显示的API非常相似。

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

Answer 2

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

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

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

xlink：<use>标记上的href属性在tsx文件

2 个答案: