Как передать переменные встроенной функции CSS в React

Question

Мне удалось создать класс в React, и я хотел установить случайный сгенерированный фон в контейнер div.Константная переменная с именем divStyle действительно включает функцию CSS rbg (), но я просто не могу найти решение для передачи переменных из this.state в эту функцию

import React from 'react';
import './ShopItem.css';

class ShopItem extends React.Component{
constructor(props){
    super(props);
    this.state = {
        r:Math.floor(Math.random() * 256),
        g:Math.floor(Math.random() * 256),
        b:Math.floor(Math.random() * 256)        
    }
}

componentDidMount() {
    console.log(this.state.r, this.state.g, this.state.b);
} 

render(){

    const divStyle = {
        background: "rgb()"
    };

    return(
        <div className="Item" style={divStyle} >
            {console.log("test")}
            {this.props.data}
        </div>
    );
};
};

export default ShopItem;

Answer 1

Вы можете использовать es6 backticks и просто добавить использовать следующий код, this относится к текущему экземпляру, поэтому this.state доступно внутри методов.

const divStyle = {
    background: `rgb(${this.state.r},${this.state.g},${this.state.b})`
};

Answer 2

Написание встроенных стилей может быстро стать многословным, сложным в обслуживании и уродливым.Я бы посмотрел на стилевые компоненты как на решение вашей проблемы.Мне кажется, это гораздо более гибкое решение для динамически меняющегося стиля в компонентах React

Вот ссылка https://www.styled -components.com /

Answer 3

Вы можете просто добавить их в строку:

const divStyle = {
    background: "rgb(" + this.state.r + "," + this.state.g + "," + this.state.b + ")"
};