Javascript Reactjs-flashcard组件-自动检测容器的宽度/高度以提供图像类

我正在构建一个“闪存卡”组件，它显示悬停时的背板。前面板将保存图像。我试图调整图像上的类，使其适应横向/纵向类型的容器大小，以便图像始终填充空间。虽然当页面第一次加载时，宽度返回为0。重定向时-图像类感觉不正确，无法填充空间-右侧底部的灰色位。希望确保代码逻辑正确，并找到解决问题的方法

css

js

import React，{Component}来自'React'；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Button”导入按钮；
导入“/FlashCard.scss”；
类FlashCard扩展组件{
构造函数（）{
超级（）；
this.myRef=React.createRef（）；
此.state={
我的回答是：错，
方向：“”
};
this.handleToggle=this.handleToggle.bind（this）；
this.updateDimensions=this.updateDimensions.bind（this）；
}
手语（e）{
e、 预防默认值（）；
this.setState（prevState=>（{isFlashed:！prevState.isFlashed}））；
}
componentDidMount（）{
window.addEventListener（“resize”，this.updateDimensions）；
这个.updateDimensions（）；
}
组件将卸载（）{
removeEventListener（“resize”，this.updateDimensions）；
}
更新维度（）{
log（“--->>闪存宽度”，this.myRef.current.getBoundingClientRect（）.width）；
log（“--->>闪烁高度”，this.myRef.current.getBoundingClientRect（）.height）；
//更新幻灯片的尺寸以获得响应
if（this.myRef.current.getBoundingClientRect（）.width>this.myRef.current.getBoundingClientRect（）.height）{
//这是一幅风景画
这是我的国家({
定位：“景观”
});
}else if（this.myRef.current.getBoundingClientRect（）.width

.flash-card{
    width: 100%;
    height: 300px;
    overflow:hidden;
    background: pink;

    .show{
        display:block;
    }

    .hide{
        display:none;
    }

    .flash-card-contents{
        width: 100%;
        height: 100%;
        min-height: 100vh;

        font-size: 12px;

        &.frontcard{
            background: $grey;
            position: relative;

            .flash-img{
                width: 100%;
            }
        }


        &.backcard{
            background: $white;
            position: relative;
            padding: 25px;
        }       
    }

    &.portrait {
        .flash-card-contents.frontcard{
            .flash-img{
                width: auto;
                height: 100%;
            }
        }
    }

    &.landscape {
        .flash-card-contents.frontcard{
            .flash-img{
                width: 100%;
                height: auto;
            }
        }
    } 
}

import React, { Component } from 'react';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';

import './FlashCard.scss';

class FlashCard extends Component {
    constructor() {
      super();
      this.myRef = React.createRef();
      this.state = {
        isFlashed: false,
        orientation: ""
      };
      this.handleToggle = this.handleToggle.bind(this);
      this.updateDimensions = this.updateDimensions.bind(this);
    }

    handleToggle(e) {
      e.preventDefault();
      this.setState(prevState => ({ isFlashed: !prevState.isFlashed }));
    }

    componentDidMount() {
      window.addEventListener("resize", this.updateDimensions);
      this.updateDimensions();
    }
    componentWillUnmount() {
      window.removeEventListener("resize", this.updateDimensions);
    }

    updateDimensions(){

      console.log("----->>flash width", this.myRef.current.getBoundingClientRect().width);
      console.log("----->>flash height", this.myRef.current.getBoundingClientRect().height);

      //update the dimensions of the slide for responsiveness
      if (this.myRef.current.getBoundingClientRect().width > this.myRef.current.getBoundingClientRect().height){
        //it's a landscape
        this.setState({
          orientation: "landscape"
        });
      } else if (this.myRef.current.getBoundingClientRect().width < this.myRef.current.getBoundingClientRect().height){
        //it's a portrait
        this.setState({
          orientation: "portrait"
        });
      } else {
        //image width and height are equal, therefore it is square.
        this.setState({
          orientation: "square"
        });
      }
    }   

    render() {
        return (
          <div 
            ref={this.myRef}
            className={"flash-card " + this.state.orientation}
            style={{
              height: (this.props.height? this.props.height: "auto")
            }}
          >
            <div className={this.state.isFlashed? 'hide': 'show'} onMouseOver={this.handleToggle}>
              <div className="flash-card-contents frontcard">
                
                <img className="flash-img" src={this.props.image} alt="" />

              </div>
            </div>         
            <div className={this.state.isFlashed? 'show': 'hide'} onMouseLeave={this.handleToggle}>
              <div className="flash-card-contents backcard">
                
                <Grid container spacing={1}>
                  <Grid item xs={12} sm={12}>
                    <h3>{this.props.header}</h3>
                    <h4>{this.props.subheader}</h4>            
                  </Grid>
                  <Grid item xs={12} sm={12}>
                    {this.props.body}
                  </Grid>
                  <Grid item xs={12} sm={12}>
                    <Button 
                      className="flash-card-button"
                      variant="contained" 
                      color="primary" 
                      href={this.props.button.link}
                    >
                      {this.props.button.label}
                    </Button>
                  </Grid>
                </Grid>

              </div>
            </div>
          </div>
        );
    }
}

export default FlashCard;