ReactJS изменить изображение / логотип на странице изменить размер

Question

Я новичок, чтобы отреагировать, хочу изменить логотип бренда в заголовке при изменении размера страницы, т.е. когда сайт виден для ПК или мобильного телефона. Логотип бренда должен измениться, большое спасибо

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>
           );
        }
}

styles.css

header{
    width:100%;
    }

Answer 2

Попробуйте просто:

  // Class method
  changeLogo = () => this.setState({ logoURL: myLogoUrl));

 // In componentDidMount
 window.addEventListener('resize',
  this.changelogo
 )
 
 // In componentWillUnmount 
 window.removeEventListener('resize',
  this.changelogo
 )