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

您可以简单地将它们添加到字符串中：

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

Answer 2

您可以使用es6反引号，只需添加使用以下代码，this引用当前实例，因此this.state在方法内部可用。

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

Answer 3

编写内联样式会很快变得冗长，难以维护且难看。我将样式化组件作为您问题的解决方案。在我看来，这是一种动态更改React组件样式的灵活得多的解决方案

这里是链接 https://www.styled-components.com/

如何在React中将变量传递给内联CSS函数

3 个答案: