React組件抱怨SVG漸變樣式？

Question

我正在嘗試將SVG變成反應組件，因此可以在多個位置使用它。

這是來源

<svg height="1000px" width="1000px" class="logo-triangle">
    <defs>
        <linearGradient id="grad1" x1="0%" y1="100%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(50,50,50);stop-opacity:1"/>
            <stop offset="100%" style="stop-color:black;stop-opacity:1"/>
        </linearGradient>
    </defs>
    <filter id="dropshadow" height="130%">
        <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
        <feOffset dx="2" dy="2" result="offsetblur"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
    <polygon points="500 474,0 106,495 0" stroke="#36e2f8" stroke-width="3"/>
</svg>

但是，react似乎不喜歡SVG的linearGradient段。

特別是這兩行：

<stop offset="0%" style="stop-color:rgb(50,50,50);stop-opacity:1"/>
<stop offset="100%" style="stop-color:black;stop-opacity:1"/>

除非我刪除了這兩行，否則該應用程序將無法運行，是否知道如何使用JSX編譯器進行此工作？

這是控制台的錯誤輸出：

× style道具需要從樣式屬性到值而不是字符串的映射。 例如，使用JSX時，樣式= {{marginRight：空格+'em'}}。 此DOM節點由Logo渲染。

Answer 1

如錯誤所示， style屬性的值應為對象而不是字符串

嘗試這個：

<stop offset="0%" style={{stopColor:"rgb(50,50,50)", stopOpacity:1}} />
<stop offset="100%" style={{stopColor:"black", stopOpacity:1}} />