Что делать, если в componentDidMount мне надо зарендерить react-элемент в dom?

Question

[KononovD]

Здравствуйте, моя идея заключалась в следующем:

componentDidMount () {
    this.setControls();
  }

  setControls = () => {
    const gears = this.__box.querySelectorAll( '.inputRange__track > span' );

    gears.forEach( ( gear, index ) => {

      gear.addEventListener( 'mouseenter', () => this.setRedGear( gear ) );
      gear.addEventListener( 'mouseleave', () => this.setBlackGear( gear ) );
    } );
  }

  setRedGear = ( gear ) => {
    const item = gear.querySelector( '.inputRange__slider' );

    const svgIcon = <Svg src={ gear } />

    item.appendChild( svgIcon );
  }

хочу отрендерить в нужный мне див - `gear.querySelector( '.inputRange__slider' )`

этот див создается модулем react-input-range.

Answer 1

[Антон Спирин]

JSX код компонента и HTML-элементы это совершенно разные вещи. Так делать нельзя.

Ваша задача, по-хорошему, решается одним css правилом:

.my-svg-selector:hover {
  fill: red;
}

Comments

[KononovD]

`ReactDOM.render( svgIcon, item );` я вот так решил проблему

дело в том, что в проекте используется svg лоадер, который генерирует спрайт и обращается к нужной картинке через тэг ``. Был вариант в css задать svg картинку как бекграунд для ползунка, но тогда fill и stroke перестают работать

вот я и запарился с добавлением элемента уже после всего рендера, других вариантов, за неимением опыта, не вижу)

[Антон Спирин]

KononovD, svg спрайты никак не мешают использовать свойство fill, какую бы вы библиотеку для стилизации при этом не использовали. Вы делаете ряд необязательных действий и вычислений, для задачи, которая решается одной строчкой и нативными средствами браузера.

[KononovD]

вот в чем загвоздка)

[Антон Спирин]

KononovD, вам надо убрать свойство fill из исходников иконки. Это совсем не сложно.

[KononovD]

Антон Спирин почему я до этого не догадался? -_- Спасибо)
Может есть какой-то сервис, который уберет fill из всех моих иконок? не все же ручками править..

[Антон Спирин]

KononovD, ну как вариант сделать replaсe в IDE по регулярному выражению:
fill="\S+"
Можно и gulp задачу написать, да и в loader, думаю, можно плагин добавить, который будет преобразование делать.

[KononovD]

Антон Спирин, понял, спасибо!