我一直在研究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。是否有任何解決方法可以使用現在使用的這個屬性(和其他)?
謝謝。
是的,它工作!但仍然只用於「過濾器」屬性。也許有其他的解決方法,其他屬性不起作用。編輯,如果你發現別的東西。謝謝。 – jsdario