css - ReactJS 在页面调整大小时更改图像/徽标

Question

我是新来的反应，想在页面调整大小时更改标题品牌徽标，即当网站在桌面或移动设备上可见时。品牌标志应该改变，非常感谢

标签： cssreactjsreact-reduxresize

Answer 1

使用方法 获取应用header元素的宽度。clientWidth

import React from "react";
import Styles from "./Styles.css";
class Header extends React.Component{
  constructor(props){
          super(props);
          this.state={
           headerLogo :"/img/logo.png" //desktop logo 
          }
          this.headerLogo = this.headerLogo.bind(this);
        }
          componentDidMount(){
            window.addEventListener('resize',this.headerLogo);
          }
        headerLogo(){
         const width = document.header.clientWidth;
                if(width <= 768){
                  this.setState({
                    headerLogo : "/img/tablogo.png" //tab logo
                  });
                }
        }
        render(){
           return(
                  <header>
                    <nav>
                      <div>
                        <img src={this.state.headerLogo} alt="logo" />
                      </div>
                    </nav>
                 </header>
           );
        }
}

样式.css

header{
    width:100%;
    }