在React.js中使用SVG过滤器属性

我一直在研究SVG和React的数据表示，他们似乎是一个完美的合适。但是，React还不支持SVG，并且还没有插件https://github.com/facebook/react/issues/2250。在React.js中使用SVG过滤器属性

还有一些解决方法，比如对某些元素使用dangerouslySetInnerHTML，在我的情况下我还找不到一个。

我想在circle svg元素中使用filter属性。但它不会呈现到DOM中。这是我的阵营组件：

class DeviceDot extends React.Component { 
    render() { 
    const { app, idx } = this.props 

    return <circle cx={50 * idx} cy={50 * idx} r='25' filter={`url(#${app})`} fill='mediumorchid' /> 
    } 
}

和过滤器：

class FilterSVG extends React.Component { 
    render() { 
    const { app, idx } = this.props 
    const icon = app ? `/api/apps/${app}/logo` : '/img/dflt.png' 

    return (
     <filter id={app || 'default'} x='0%' y='0%' width='100%' height='100%'> 
     <feImage xlinkHref={icon} /> 
     </filter> 
    ) 
    } 
}

但是我不能没有包装这个组件，我想重用的是（圆圈SVG元素）使用dangerouslySetInnerHTML。是否有任何解决方法可以使用现在使用的这个属性（和其他）？

谢谢。

来源

2016-03-01 jsdario

对于过滤器，你可以使用CSS样式的解决办法，就像这样：

const style = { 
    filter: `url(#${app || 'default'})` 
}

而复位元件...

return <circle cx={50 * idx} cy={50 * idx} r='25' style={style} />

如果您只想过滤你可以使用普通的CSS。因此，将它添加到React道具。

来源

2016-03-01 11:53:10

是的，它工作！但仍然只用于“过滤器”属性。也许有其他的解决方法，其他属性不起作用。编辑，如果你发现别的东西。谢谢。 – jsdario

反应确实支持SVG。您已链接的问题已得到解决。在某些情况下，JSX属性将与HTML属性不同，例如xlinkHref而不是xlink:href。应该没有必要使用dangerouslySetInnerHTML。

在上面的代码中，它看起来好像只是简单地使用了错误的变量。你想这个代替：

filter={`url(#${icon})`}

来源

2016-03-01 11:17:48

刚刚编辑。是的SVG是支持的（就像我分享的链接一样）。这个变量是错误的，但仍然不是问题，因为'filter'属性根本不会被渲染。甚至没有'filter =“url（#undefined）”' – jsdario

看来这已经从React 0.15.0开始修复：https：//github.com/facebook/react/pull/6243 – paulmelnikow

在React.js中使用SVG过滤器属性

回答

相关问题