我在React JSX中使用svg元素，認爲<use>在JSX中有效。以下錯誤是否正確？JSX不再支持小寫字母組件名稱（使用）：<use>

小寫組件名（使用）在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>

來源

2014-12-05 Prasanth

TL; DR

我認爲你正在使用dangerouslylSetInnerHTML現在卡住。

說明

陣營僅支持HTML/SVG元素的子集，<use />不supported yet。

隨着v0.12反應切換到restricting lower-case tag names to only HTML/SVG elements，但正如你所遇到的失敗對於不是自己的白名單中的元素。 FB建議opening an issue提供他們尚不支持的有效標籤。

您可以使用{React.createElement('use')}迫使反應呈現<use />標籤，但它仍然不會允許你設置xlink:href屬性，因爲陣營不支持未知DOM屬性（請參閱open issue on the topic）。在前面的問題的一些建議在使用componentDidMount到this.getDOMNode().setAttribute設置任何非標準屬性，但是這取決於你的使用情況下，這很可能甚至比dangerouslySetInnerHTML選項更加不方便。

來源

2014-12-05 23:02:17

JSX不再支持小寫字母組件名稱（使用）：<use>

回答

TL; DR

相關問題