[英]How to set background image using react refs?
I would like to set a background to a certain div using react ref, here is what I have tried so far:我想使用 react ref 为某个 div 设置背景,这是我迄今为止尝试过的:
The class component:类组件:
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
export default class CalendarDay extends React.Component {
constructor(props) {
super(props);
this.backgroundImageRef = React.createRef();
}
render () {
let { day, isToday, events, onClick } = this.props;
const dayClasses = classnames({
'flexColumn': true,
'day': true,
'inactive': day.siblingMonth,
'today': isToday,
});
if(typeof day.eventSlots !== 'undefined' && day.eventSlots.length > 0 ) {
let getEventData = Object.values(day.eventSlots)[0].eventClasses;
switch (getEventData) {
case 'event1':
let getInnerGrid = this.backgroundImageRef.current;
console.log(getInnerGrid); // returns null
//event1.style.backgroundImage = "url('../images/eventbg1.svg')";
console.log(getEventData);
break;
default:
break;
}
}
return (
<div
onClick={onClick.bind(null, this, day)}
className={dayClasses}>
<div ref={this.backgroundImageRef} className="inner-grid">
<div className="date">
{day.day}
</div>
{events}
</div>
</div>
);
}
}
CalendarDay.propTypes = {
day: PropTypes.object.isRequired,
isToday: PropTypes.bool,
events: PropTypes.array,
onClick: PropTypes.func,
};
Now when I run the app and check the console, I see the null.现在,当我运行应用程序并检查控制台时,我看到了 null。 What am I doing wrong here?我在这里做错了什么?
You can create a bgStyle
, and update bgStyle based on condition
.您可以创建一个bgStyle
,并根据on condition
更新 bgStyle 。 Then u can directly use on div
as style prop.然后你可以直接在div
使用作为样式道具。
let bgStyle = {}
if(typeof day.eventSlots !== 'undefined' && day.eventSlots.length > 0 ) {
let getEventData = Object.values(day.eventSlots)[0].eventClasses;
switch (getEventData) {
case 'event1':
bgStyle.backgroundImage = "url('../images/eventbg1.svg')"
break;
default:
break;
}
}
return (
<div style={bgStyle} className="inner-grid">
<div className="date">
{day.day}
</div>
{events}
</div>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.