我一直在研究 SVG 和 React 的数据表示,它们似乎非常适合。但是 React 尚不支持 SVG,并且尚不存在插件 https://github.com/facebook/react/issues/2250 .
但是有一些解决方法,比如对某些元素使用 dangerouslySetInnerHTML
,在我的例子中我还找不到。
我想在 circle
svg 元素中使用 filter
属性。但是它不会呈现到 DOM 中。这是我的 React 组件:
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>
)
}
}
但是我不能在不包装这个组件的情况下使用 dangerouslySetInnerHTML,我想按原样重用它(一个圆形 SVG 元素)。是否有任何解决方法来使用您现在正在使用的这个属性(和其他属性)?
谢谢。
最佳答案
对于过滤器,您可以使用 CSS 样式作为变通方法,如下所示:
const style = {
filter: `url(#${app || 'default'})`
}
返回的组件...
return <circle cx={50 * idx} cy={50 * idx} r='25' style={style} />
如果您只想过滤,可以使用纯 CSS。因此,将其添加到 React props。
关于javascript - 在 React.js 中使用 SVG 过滤器属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35719807/