模板和 SVG 属性 xlink-href答案

【问题标题】：Stencil and SVG attribute xlink-href模板和 SVG 属性 xlink-href
【发布时间】：2020-03-25 20:45:39
【问题描述】：

使用 Stencil 1.8.0，此代码有效：

<svg>
  <use xlinkHref="#some-icon"/>
</svg>

最近 Stencil 更新到 1.11 并且提到的代码停止工作。当我尝试构建项目时，我收到了 Typescript 错误，说：

Type '{ xlinkHref: string; }' is not assignable to type 'SVGAttributes<SVGElement>'.
Property 'xlinkHref' does not exist on type 'SVGAttributes<SVGElement>'.

搜了一圈发现xlinkHref改名为xlink-href(link)

如果我将代码更改为：

<svg>
  <use xlink-href="#some-icon"/>
</svg>

构建过程顺利通过，但随后在浏览器的控制台中我得到：

DOMException: Failed to execute 'setAttributeNS' on 'Element': The qualified name 
provided ('-href') contains the invalid name-start character '-'.
    at setAccessor (http://localhost:3334/build/index-a8bdf364.js:618:25)
    at updateElement (http://localhost:3334/build/index-a8bdf364.js:646:9)
    at createElm (http://localhost:3334/build/index-a8bdf364.js:695:13)
    at createElm (http://localhost:3334/build/index-a8bdf364.js:705:29)
    at createElm (http://localhost:3334/build/index-a8bdf364.js:705:29)
    at createElm (http://localhost:3334/build/index-a8bdf364.js:705:29)
    at createElm (http://localhost:3334/build/index-a8bdf364.js:705:29)
    at createElm (http://localhost:3334/build/index-a8bdf364.js:705:29)
    at createElm (http://localhost:3334/build/index-a8bdf364.js:705:29)
    at createElm (http://localhost:3334/build/index-a8bdf364.js:705:29)

我没有找到任何关于此的示例或文档。

谁能告诉我如何解决这个问题？

【问题讨论】：

标签： svg stenciljs

【解决方案1】：

感谢 Max 在 Slack 上的 Stencil 聊天，我得到了答案。这是一个临时修复，修复正在进行中。

import { JSXBase } from '@stencil/core/internal';

    // render()
    type SVG2Attributes = JSXBase.SVGAttributes & { href: string };

    // @ts-ignore
    const link = <use href="example" /> as SVG2Attributes;

    return (
      <svg>
        {link}
      </svg>
    );

【讨论】：

你能链接到模具问题吗？谢谢！