我一直在研究SVG和React的数据表示,它们看起来非常合适。但是,React尚不支持SVG,并且尚不存在插件https://github.com/facebook/react/issues/2250。
然而,有些解决方法就像在某些元素中使用dangerouslySetInnerHTML
一样,在我的情况下我还找不到一个。
我想在filter
svg元素中使用circle
属性。但是它没有被渲染到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元素)。是否有任何解决方法可以使用您现在使用的此属性(以及其他属性)?
谢谢。
答案 0 :(得分:2)
对于过滤器,您可以使用CSS样式作为解决方法,如下所示:
const style = {
filter: `url(#${app || 'default'})`
}
返回组件......
return <circle cx={50 * idx} cy={50 * idx} r='25' style={style} />
如果您只想过滤,可以使用纯CSS。因此,将它添加到React props。
答案 1 :(得分:1)
React 支持SVG。您已关联的问题已修复。在某些情况下,JSX属性将与HTML属性不同,例如xlinkHref
代替xlink:href
。没有必要使用dangerouslySetInnerHTML
。
在上面的代码中,看起来好像只是使用了错误的变量。你想要这个:
filter={`url(#${icon})`}