使用 React Hook 更改背景图像

Question

我是 React 新手，我正在使用 React Hook 构建我的 Web 应用程序。我想更改一个类的背景图像，这样如果窗口的宽度

这是我的代码：

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;

App.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;