Реагировать на изменение компонента DOM при изменении размера окна - PullRequest
Новая
       13

Реагировать на изменение компонента DOM при изменении размера окна

1 голос
/ 07 марта 2020

Мне нужно изменить lo go, когда ширина окна меньше 768, но я не могу этого понять. Должен реагировать на изменения ширины окна. что не так с моим кодом? спасибо! 

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

Ответы [ 2 ]

0 голосов
/ 07 марта 2020

Используйте srcset в теге изображения, чтобы указать другой sr c для другого размера экрана: 

<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, чтобы определить, какой sr c должен использоваться в каком условии.

Ссылка на MDN документы для дальнейшего чтения.

0 голосов
/ 07 марта 2020

Попробуйте использовать 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>

Отображение небольшого экрана lo go, если Размер экрана превышает 768 пикселей. Экран большего размера lo go

.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"/>
...