在 window 调整大小时反应 DOM 更改组件

Question

当window 宽度小于768 时，我需要更改徽标但无法实现。必须响应 window 宽度变化。我的代码有什么问题？谢谢！

export default class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            winWidth: 0
        };
        this.getWindowSize = this.getWindowSize.bind(this);
    }

    componentDidMount() {
        this.getWindowSize();
        window.addEventListener('resize', this.getWindowSize);
      }

      componentWillUnmount() {
        window.removeEventListener('resize', this.getWindowSize);
      }

      getWindowSize() {
        this.setState({ winWidth: window.innerWidth});
      }

    changeLogo(logo){
        if(this.state.winWidth < 768){
            logo = './images/small.png';

        }
        logo = './images/regular.png';   
    }


    render() {
        const {logo} = this.props;
        return (
               <div className="Header">
                 <img src={ this.changeLogo(logo) } alt="logo"/>
            </div> 
        )
    }
}

Answer 1

尝试使用CSS代替JS根据屏幕宽度显示不同的图片

<Header class="Header">
    <img src="./images/small.png" className="small-screen-logo" alt="logo"/>
    <img src="./images/regular.png" className="large-screen-logo" alt="logo"/>
</Header>

显示小屏幕标志，如果屏幕尺寸大于 768px 显示大屏幕标志

.small-screen-logo {
    display: block;
}

.large-screen-logo {
    display: none;
}


@media (min-width: 768px) {
    .small-screen-logo {
        display: none;
    }

    .large-screen-logo {
        display: block;
    }
}

如果你使用 bootstrap 你可以用 bootstrap 类:

<Header class="Header">
    <img src="./images/small.png" className="d-block d-md-none" alt="logo"/>
    <img src="./images/regular.png" className="d-none d-md-block" alt="logo"/>
</Header>

推荐阅读https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries

如果你想使用 JS 你可以添加一个方法 logo 而不是 changeLogo(logo).

logo() {
    return './images/' + (this.state.winWidth < 768 ? 'small.png' : 'regular.png') + '.png';
}

然后在渲染中使用它如下：

<img src={logo} alt="logo"/>

Answer 2

在图片标签中使用 srcset 为不同的屏幕尺寸指定不同的 src：

<img srcset="https://placekitten.com/768/768 768w,
             https://placekitten.com/1366/1366 1366w"
     sizes="(max-width: 768px) 768px,
            1366px"
     src="https://placekitten.com/1366/1366" alt="placeholder kitten">

使用srcset声明多个图像来源，sizes定义在什么情况下使用哪个src。

Link 到 MDN docs 进一步阅读。

在 window 调整大小时反应 DOM 更改组件

React DOM change component on window resize

reactjs

react-dom