时间戳

首页 > 解决方案 > 使用 React Hook 更改背景图像

javascript - 使用 React Hook 更改背景图像

问题描述

我是 React 新手，我正在使用 React Hook 构建我的网络应用程序。我想更改一个类的背景图像，这样如果窗口的宽度 < 376px，它将显示“backgorund_mobile”，当它大于 376px 时，它将显示“backgound_desktop”，但它不起作用。我怎样才能做到这一点？请帮我。谢谢你。

这是我的代码：

页眉.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;

标签： javascriptcssreactjs

解决方案

试试看

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;

推荐阅读