Javascript / React: изменение отображаемого фона SVG на основе значения состояния - PullRequest
Новая
       25

Javascript / React: изменение отображаемого фона SVG на основе значения состояния

0 голосов
/ 27 января 2020

Я работаю над проектом для моего Bootcamp. Дизайн не в центре внимания, но я хочу go для всего Kaboodle: иметь и рабочий продукт, и красивый интерфейс для его отображения. Я использую .SVG в качестве отображаемого фона, установленного с помощью CSS, и до сих пор мне удалось изменить отображаемый SVG на основе CSS медиазапросов. Тем не менее, меня интересует возможность его изменения в зависимости от значения, хранимого в состоянии / реквизитах.

Суть проекта - просмотрщик изображений и система голосования / ранжирования пользователей. Я думал об изменении фона в зависимости от категории фотографии, которая будет содержать значение в массиве, содержащем данные фотографии / пользователя. Допустим, категория «Собака», и я хочу отобразить соответствующий фон. Но когда пользователь переключается на другую фотографию и ее категория «Кошка», я хотел бы, чтобы отображался другой фон. Я работаю с анимированными SVG для фонов.

Как мне лучше всего это сделать? Я полагаю, что могу добавить код в мои функции, которые используются для изменения отображаемых фотографий.

Спасибо!

1 Ответ

0 голосов
/ 27 января 2020

Вы можете напрямую применять стили, основанные на значении состояния.

Также вы можете использовать пакет ReactSvg. Это позволяет вам получить доступ к узлам внутри SVG. 

<ReactSVG beforeInjection={(svg) => { 
    const myStyleClass = this.state.myStyle == 'x' ? 'y' : 'z';
    svg.classList.add(''); 
}} src={myImportedImage} />
...