【问题标题】：Lower case component names (use) are no longer supported in JSX: <use>JSX 不再支持小写组件名称（use）：<use>
【发布时间】：2023-03-20 20:42:01
【问题描述】：

我在 React JSX 中使用 svg 元素，认为 <use> 在 JSX 中有效。以下错误正确吗？

JSX 不再支持小写组件名称（使用）：解析文件时请参阅 http://fb.me/react-jsx-lower-case

<svg className="icon">
    <use xlink:href="#icon-call"></use>
</svg>

使用 dangerouslySetInnerHTML 修复它。

<svg className="icon" dangerouslySetInnerHTML={{__html:'<use xlink:href="#icon-dnd-on"></use>'}}>
</svg>

【问题讨论】：

标签： reactjs svg jsx

【解决方案1】：

TL;DR

我认为你现在无法使用 dangerouslylSetInnerHTML。

说明

React 仅支持 HTML/SVG 元素的子集，<use /> 不支持 supported yet。

随着 v0.12 React 切换到restricting lower-case tag names to only HTML/SVG elements，但是正如您所遇到的，对于不在其白名单上的元素，这将失败。 FB 推荐 opening an issue 用于他们尚不支持的有效标签。

您可以使用 {React.createElement('use')} 强制 React 呈现 <use /> 标签，但它仍然不允许您设置 xlink:href 属性，因为 React 不支持未知的 DOM 属性（请参阅 open issue on the topic）。在上一期中，有人建议在componentDidMount 中使用this.getDOMNode().setAttribute 来设置任何非标准属性，但根据您的用例，这可能比dangerouslySetInnerHTML 选项更不方便。

【讨论】：