Задать вопрос
@embiid
javascript

Как inline изменять фон div в ReactJS?

Нужно для каждого компонента изменять цвета заднего фона, который зависит от главной палитры цветов картинки.
К примеру, есть уже такой компонент: 
<Hero   heroImg  = {require('../images/heroes/flash.jpg')}
             heroName = "Flash"
             heroDesc = "Three men have held the title of 'The Fastest Man Alive' -- Jay Garrick, Barry Allen, and Wally West -- each of them redefined the word 'hero.'"/>


А вот, как я это делал в простой нтмл-разметке, просто inline:
<div class="hero" style="background:#d39340">
   <img src="images/heroes/flash.jpg"/>
   <div class="hero-desc">
       <h1>Flash</a>
       <h3>Three men have held the title of "The Fastest Man Alive" -- Jay Garrick, Barry Allen, and Wally West -- each of them redefined the word "hero."</a>
   </div>
</div>


Как можно такое же сделать в ReactJS?
  • Вопрос задан
  • 1858 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 1
GreyCrew
@GreyCrew
Full-stack developer
Допустим у вас есть массив цветов (нет не те, которые цветут)
const colors = [#000, #333, #555 , #etc...]
Берем компонент и в нем делаем цикл по этим цветам, в которых передаем параметром один из цветов. 
class BackgroundSwitcher extends React.Component {
  render() {
    return (
      <>
        {colors.map(color => <Hero background={color} />)}
      </>
    );
  }
}

Теперь в компоненте Hero берем и вставляем цвет

const Hero = (props) => <div className="hero" style={{background: props.background}}>
   <img src="images/heroes/flash.jpg"/>
   <div className="hero-desc">
       <h1>Flash</a>
       <h3>Three men have held the title of "The Fastest Man Alive" -- Jay Garrick, Barry Allen, and Wally West -- each of them redefined the word "hero."</a>
   </div>
</div>


Конечно это все в вакууме, но надеюсь понятно, как передавать параметры.

Итого мы будем иметь несколько элементов с разными фонами.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@Dasslier
FrontEnd Developer
А по какой причине цвет нужно изменять именно инлайн?
Ответ написан
8 комментариев
8 комментариев
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Ошибка в 1с при выгрузке товаров на сайт на Битриксе
25 апр. 2024, в 03:08
3000 руб./за проект
Создание и публикация короткого (reels) UGC-видео на YouTube-канале
25 апр. 2024, в 01:46
500 руб./за проект
Настроить перехват https-трафика для android-приложения
25 апр. 2024, в 01:02
10000 руб./за проект
Ещё заказы