2016-03-01 45 views
3

我一直在研究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。是否有任何解決方法可以使用現在使用的這個屬性(和其他)?

謝謝。

回答

1

對於過濾器,你可以使用CSS樣式的解決辦法,就像這樣:

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

而復位元件...

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

如果您只想過濾你可以使用普通的CSS。因此,將它添加到React道具。

+0

是的,它工作!但仍然只用於「過濾器」屬性。也許有其他的解決方法,其他屬性不起作用。編輯,如果你發現別的東西。謝謝。 – jsdario

0

反應確實支持SVG。您已鏈接的問題已得到解決。在某些情況下,JSX屬性將與HTML屬性不同,例如xlinkHref而不是xlink:href。應該沒有必要使用dangerouslySetInnerHTML

在上面的代碼中,它看起來好像只是簡單地使用了錯誤的變量。你想這個代替:

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

剛剛編輯。是的SVG是支持的(就像我分享的鏈接一樣)。這個變量是錯誤的,但仍然不是問題,因爲'filter'屬性根本不會被渲染。甚至沒有'filter =「url(#undefined)」' – jsdario

+0

看來這已經從React 0.15.0開始修復:https://github.com/facebook/react/pull/6243 – paulmelnikow