javascript - css中的Javascript变量不起作用

Question

在这段代码中，我同时传递了 imageurl 和 size，它们是 javascript 变量，但我在 css 中使用。css 没有考虑两者。如何解决这个问题？？

const MenuItem = ({title, imageUrl, size}) => {
    return(
        <div className="${size} menu-item">
            <div className="background-image" style={{backgroundImage: "url(${imageUrl})"}} />
            <div className="content">
                <h1 className="title">{title.toUpperCase()}</h1>
                <span className="subtitle">SHOP NOW</span>
            </div>
        </div>
    );
}

Answer 1

这应该有效：

const MenuItem = ({title, imageUrl, size}) => {
return(
    <div className={`${size} menu-item`}>
        <div className="background-image" style={{backgroundImage: "url(${imageUrl})"}} />
        <div className="content">
            <h1 className="title">{title.toUpperCase()}</h1>
            <span className="subtitle">SHOP NOW</span>
        </div>
    </div>
);
}

Answer 2

要在这样的字符串中使用变量，您需要使用以下语法：

className={`${size} menu-item`}

Answer 3

您应该将它们包装在反引号 ( ``) 中：

const MenuItem = ({title, imageUrl, size}) => {
    return(
        <div className=`${size} menu-item`>
            <div className="background-image" style={{backgroundImage: `${url(${imageUrl})}`}} />
            <div className="content">
                <h1 className="title">{title.toUpperCase()}</h1>
                <span className="subtitle">SHOP NOW</span>
            </div>
        </div>
    );

}