Question

我一直在研究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元素）。是否有任何解决方法可以使用您现在使用的此属性（以及其他属性）？

谢谢。

Answer 1

对于过滤器，您可以使用CSS样式作为解决方法，如下所示：

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

返回组件......

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

如果您只想过滤，可以使用纯CSS。因此，将它添加到React props。

Answer 2

React 支持SVG。您已关联的问题已修复。在某些情况下，JSX属性将与HTML属性不同，例如xlinkHref代替xlink:href。没有必要使用dangerouslySetInnerHTML。

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

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

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

2 个答案: