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

Question

[embiid]

Нужно для каждого компонента изменять цвета заднего фона, который зависит от главной палитры цветов картинки.
К примеру, есть уже такой компонент:

<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?

Comments

[Rustam Bainazarov]

Посмотрите на это:
https://www.npmjs.com/package/fast-average-color

Answer 1

[Сергей Сунцев]

Допустим у вас есть массив цветов (нет не те, которые цветут)
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>

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

Итого мы будем иметь несколько элементов с разными фонами.

Answer 2

[Павел Диденко]

А по какой причине цвет нужно изменять именно инлайн?

Comments

[embiid]

а я не знаю, я думал так легче будет)
а как можно еще? какие другие есть способы?

[Rustam Bainazarov]

embiid, скорее всего он про backend-методы, когда он считает средний цвет картинки, а не JS у клиента в браузере. Типичный пример — как у Яндекс.Дзена сделано.

Ну а если он правда спрашивает, почему inline — потому, что для каждой картинки делать класс с нужным цветом — это охренеешь. Поэтому такие вещи делают inline. Но я не думаю, что он об этом.

[Павел Диденко]

Да самые обычные, цвет можно передать в виде объекта в атрибуте style. А сам цвет в объекте менять исходя из условий. Если подробнее опишешь как должно работать и от какого действия зависит цвет - будет проще помочь. Либо лучше скинь в песочнице свой компонент

[Rustam Bainazarov]

Павел Диденко, значит, вы не об этом.

Автор вопроса о среднем цвете картинки.

Вот тут пример, о чем он:
https://www.npmjs.com/package/fast-average-color

[Павел Диденко]

Рустам Байназаров, наверно вы немного не поняли, он пишет как ИЗМЕНИТЬ фон, а не как определить цвет. Видимо определять цвет он уже научился и может его как-то передать в функцию, а функция уже сделает действие, которое изменит фон на нужный цвет

[Rustam Bainazarov]

Павел Диденко, да, вполне возможно, посмотрим, что скажет автор.

[embiid]

Рустам Байназаров, Павел Диденко, парни, вы очень сильно перемудрили как мне кажется)
я уже с бд загружаю картинку с текстом + на каждую картинку есть свой цвет, и теперь мне надо на каждый отдельный div, где будет картинка менять цвет background)

[Павел Диденко]

embiid, что именно перемудрено с объектом style? Это самый просто способ работы со стилями в React