5

我有简单的代码，其中包含带有<use>标签的 svg 图标到使用 stencjiljs（tsx 语法）创建的 Web 组件中。但是，当我将xlink:href属性添加到<use>标签时，我得到了 error 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 中，在这种情况下不起作用。

我有具体的方法吗？

4

2 回答 2

4

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

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

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

于 2018-04-18T07:26:14.553 回答
3

看起来 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）

于 2018-04-18T07:19:38.900 回答