JSX不再支持小写组件名称（使用）：<use> </use>

Question

我在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>

Answer 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）。在上一期中，有人建议在this.getDOMNode().setAttribute中使用componentDidMount设置任何非标准属性，但根据您的使用情况，这可能比dangerouslySetInnerHTML选项更加不方便。