我是新来的人,我想更改页面大小时的标题品牌徽标,即当网站在台式机或移动设备上可见时。品牌徽标应更改,非常感谢
答案 0 :(得分:0)
只需尝试:
// Class method
changeLogo = () => this.setState({ logoURL: myLogoUrl));
// In componentDidMount
window.addEventListener('resize',
this.changelogo
)
// In componentWillUnmount
window.removeEventListener('resize',
this.changelogo
)
答案 1 :(得分:0)
使用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%;
}