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