使用 React Hook 更改背景圖像

Question

我是 React 新手，我正在使用 React Hook 構建我的 web 應用程序。 我想更改 class 的背景圖像，這樣如果 window 的寬度 < 376px，它將顯示“backgorund_mobile”，當它大於 376px 時，它將顯示“backgound_desktop”，但它不起作用。 我怎樣才能做到這一點？ 請幫我。 謝謝你。

這是我的代碼：

Header.jsx

import React from "react"; 
import backgound_desktop from '../images/desktop/image-hero.jpg';

function Header(){
return(
    <div className="heading" style={{backgroundImage: "url(" + backgound_desktop + ")"}}>
        //Some other codes
    </div>
)}
export default Header;

應用程序.jsx

 import React from "react"; import Header from "./Header"; import backgound_desktop from '../images/desktop/image-hero.jpg'; import backgorund_mobile from "../images/mobile/image-hero.jpg"; function App() { const [windowWidth, setWindowWidth] = React.useState(window.innerWidth); React.useEffect(() => { const handleWindowResize = () => { setWindowWidth(window.innerWidth); } window.addEventListener('resize', handleWindowResize); return () => { window.removeEventListener('resize', handleWindowResize); } }, []); if (windowWidth < 376) { document.querySelector("heading").style.backgroundImage = "url(" + backgorund_mobile + ")"; }; return ( <div className = "container-fluid nopadding" > <Header / > </div> ) } export default App;

Answer 1

試試看

import React, {useState} from "react"; 
import backgound_desktop from './images/images-desk.webp';
import backgound_mobile from './images/images-phone.webp';

function Header(){

const [isMobile, setMobile] = useState(false) ;

    React.useEffect(() => {
        const handleWindowResize = () => {
            const bool =  window.innerWidth < 367 ? true : false;
            setMobile(bool) 
                
        }
        window.addEventListener('resize', handleWindowResize);
        return () => {
        window.removeEventListener('resize', handleWindowResize);
        }
    }, []);

    return(
        <div className="heading" style={{backgroundImage: "url(" +( isMobile? backgound_mobile : backgound_desktop) + ")", height: '400px'}}>
            //Some other codes
        </div>
    )

}


export default Header;