reactjs - JSX 不再支持小写组件名称（使用）：

Question

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

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

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

使用 dangerouslySetInnerHTML 修复了它。

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

Answer 1

TL;博士

我想你现在被卡住dangerouslylSetInnerHTML了。

解释

React 仅支持 HTML/SVG 元素的子集，<use />目前尚不支持。

随着 v0.12 React 切换到将小写标签名称限制为仅 HTML/SVG 元素，但是正如您所遇到的，对于不在其白名单上的元素，这将失败。FB 建议为他们还不支持的有效标签打开一个问题。

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