ReactJS-抽认卡组件-自动检测容器的宽度/高度以提供图像类

如何解决ReactJS-抽认卡组件-自动检测容器的宽度/高度以提供图像类

我正在构建一个“闪存卡”组件，该组件可显示悬停时的背板。前面板将保留图像。我正在尝试使图像上的类适应于风景/肖像类型的容器大小，以使图像始终充满空间。尽管页面首次加载时-宽度返回为0。在重定向时-图像类感觉不正确并且无法填充空间-右下方的灰色位。希望确保代码逻辑正确，并解决此问题。

css

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

js

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;