Reactjs 属性更新时不重新提交

我正在通过滑块输入控件更新SVG过滤器属性，但它不会持续更新渲染过滤器

以下是工作代码：

如果我使用

危险的LySetinerHTML

来设置过滤器，那么它可以工作，但是这种黑客技术还不够好，不能在生产代码中使用吗

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { blur: 2 };
    this.blurChange = this.blurChange.bind(this);
  }

  blurChange(event) {
    this.setState({ blur: Number(event.target.value) });
  }

  render() {
    return (
      <div>
        <svg width="0" height="0" viewBox="0 0 0 0">
          <filter id="outline"
            dangerouslySetInnerHTML={{
              __html: `<feGaussianBlur result="blurOut" stdDeviation="${this.state.blur}" />`
            }}
          />
          <filter id="outline1">
            <feGaussianBlur result="blurOut" stdDeviation={this.state.blur} />`
          </filter>            
        </svg>
        <h1 className="fe">Working</h1>
        <div className="control"><input type="range" min="0" max="50" onChange={this.blurChange} value={this.state.blur} /><h3>Blur Slider</h3></div>
        <h1 className="fe1">Not Working</h1>
        <div className="control"><input type="range" min="0" max="50" onChange={this.blurChange} value={this.state.blur} /><h3>Blur Slider</h3></div>
        </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={blur:2}；
this.blurChange=this.blurChange.bind（this）；
}
改变（事件）{
this.setState（{blur:Number（event.target.value）}）；
}
render（）{
返回(
`
工作
模糊滑块
不起作用
模糊滑块
);
}
}
ReactDOM.render（，document.getElementById（“app”）；

---

是否可以像您通常使用React时那样更新SVG过滤器属性而不使用

危险的SytenerHTML

hack？

有趣的是，显然必须重新装载

才能正确应用更改，React不会重新装载它，而只更新

stdDeviation

属性。要修复它，请另外在

上使用

键
道具，以便每次
此.state.blur更改时，React都会重新装载它：

<filter id="outline1">
  <feGaussianBlur key={this.state.blur} stdDeviation={this.state.blur} />
</filter>


谢谢，这确实有效，意味着不需要使用丑陋的
危险的HTML
黑客。更有趣的是，如果在SVG过滤器原语或应用于它的HTML元素上设置键，似乎并不重要。我不确定我是否理解幕后发生的事情，但是如果键在HTML元素上。这将如何触发SVG原语的重新装载？是因为它们是链接的，并且更新其中一个上的密钥会强制重新装载吗？我已经更新了pen以包含这两种场景：它不会触发SVG原语重新装载。关键是我们需要触发浏览器在HTML元素上重新应用样式。因此，您可以通过重新安装SVG或HTML元素来触发它。基本上，它们是使用CSS样式链接的（与React无关）。当您重新安装应用这些样式的HTML元素时，浏览器当然会重新计算其样式并重新呈现。