ウィンドウのサイズ変更にDOM変化成分を反応させます

キムB：

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

ニコライキセリョフ博士：

JSの代わりにCSSを使用してみてください画面の幅に基づいて異なる画像を表示します。

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

あなたは、ブートストラップを使用する場合は、ブートストラップクラスとそれを達成することができます：

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

ウィンドウのサイズ変更にDOM変化成分を反応させます

おすすめ