javascript - React 组件提示 SVG 渐变样式？

Question

我正在尝试将 SVG 转换为 React 组件，以便我可以在多个位置使用它。

这是来源

<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 编译器使其运行吗？

这是控制台的错误输出:

× The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. This DOM node was rendered by Logo.

Answer 1

由于错误指出 style 属性的值应该是一个对象而不是字符串

试试这个:

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