使用基于反应逻辑的内联 CSS 在反应中设置背景图像

Question

我正在尝试根据我从映射酒精列表中获得的字符串来设置我在 return 语句中获得的每个 div 的背景图像，但不能完全弄清楚我们如何做到这一点。

下面是我的代码。

提前谢谢你。

import styles from "../styles/Home.module.css"

import { useHistory } from 'react-router-dom'

import { useSelector } from 'react-redux'

import whiskey from '../images/whiskey.jpg'
import gin from '../images/gin.jpg'
import vodka from '../images/vodka.jpg'
import tequila from '../images/tequila.jpg'
import rum from '../images/rum.jpg'

function Home() {

        const alcoholList = useSelector(state => state.alcoholList)

        const history = useHistory()
        const handleClick = (alcoholName) => {
        history.push(`/ingredients?alcohol=${alcoholName}`)
        console.log(alcoholName)
    }

    return(
        <div>
            <div className={styles.homeIngredients}>
                {alcoholList.map(item =>      
                    <div onClick={()=>{handleClick(item)
                        } } className={styles.inner} style={{
                            backgroundImage: `url(${whiskey})`,
                        }}>
                     
                            <h2>{item}</h2>
                            <p>view recipe</p>
                      
                    </div>)}
            </div>
        </div>
    )
}

export default Home;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

问题解决了！

它不起作用的原因是因为酒精列表中的名称和对象中的名称不匹配：| 一个是小写，另一个是大写。

Answer 2

你可以做一个这样的小技巧：

首先，创建一个对象，其中键是酒精名称，值是图像（或图像路径）。这可以通过添加以下内容轻松完成：

const ALCOHOL_IMAGES = {whiskey, gin, vodka, tequila, rum}

然后，在您的地图功能中，您可以：

{alcoholList.map(item =>      
                    <div onClick={()=>{handleClick(item)
                        } } className={styles.inner} style={{
                            backgroundImage: `url(${ALCOHOL_IMAGES[item]})`,
                        }}>
//rest of the code

Answer 3

我不知道alcoholList 长什么样，但也许你可以试试这个：

    const ingredients = { whiskey, gin, vodka, tequila, rum };

    return(
        <div>
            <div className={styles.homeIngredients}>
                {alcoholList.map(item =>      
                    <div onClick={()=>{handleClick(item)
                        } } className={styles.inner} style={{
                            backgroundImage: `url(${ingredients[item]})`,
                        }}>
                     
                            <h2>{item}</h2>
                            <p>view recipe</p>
                      
                    </div>)}
            </div>
        </div>
    )
}