Реагировать SVG не перерисовывается при обновлении атрибута - PullRequest
Новая
       17

Реагировать SVG не перерисовывается при обновлении атрибута

2 голосов
/ 29 марта 2019

Я обновляю атрибут фильтра SVG через элемент управления ползунком, но он не обновляет постоянно отрендеренный фильтр.

Вот рабочий код: https://codepen.io/dgwyer/pen/EXmqrb

Если яиспользуйте dangerouslySetInnerHTML для установки фильтра, тогда он работает, но этот хак не достаточно хорош для использования в производственном коде? 

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"));

Есть ли способ обновить атрибут фильтра SVG, как вы это обычно делаете с React безиспользуя dangerouslySetInnerHTML хак?

1 Ответ

2 голосов
/ 29 марта 2019

Интересно, что <feGaussianBlur /> необходимо перемонтировать, чтобы изменения применялись правильно, и React не перемонтирует его, а только обновляет атрибут stdDeviation. Чтобы исправить это, используйте key prop дополнительно на <feGaussianBlur />, чтобы React перемонтировал его каждый раз, когда this.state.blur меняется: 

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