reactjs - 我如何使用 reactspring 更改和动画 div 背景图像

Question

美好的一天，我正在尝试更改将鼠标悬停在“listItem”组件之一上的任何时候的背景图像，但我似乎无法使其工作并且似乎无法在我的代码中找到任何错误，虽然我会说我对使用反应弹簧的知识有限。

import { useSpring, animated, config } from 'react-spring'
import Lugard from "./Lugard.jpg"
import { useState } from "react"

const List = () => {

    const [display, setDisplay] = useState('')
    
    const mouseIn = (pic) => {
        console.log (display)
        setDisplay(pic)
        console.log (display)
    }

    const anim = useSpring({
        to: { backgroundImage: display? `url (${display})`: "url ()", width: '50px'  },
        config: config.slow
      })

    return ( 
        <div className='navigation-wrapper'>
            <div className="project-preview-wrapper">
            <animated.div class="project-preview" style={{ ...anim, width: '50px'}}></animated.div>
            <ul>
             <Listitem text='Obafemi awolowo' mouseIn={mouseIn} image={Lugard}/>
             </ul>
            </div>
            
        </div>
    )
}

export default List

标签： reactjsreact-spring