javascript - 如何使用反应参考设置背景图像?
问题描述
我想使用 react ref 为某个 div 设置背景,这是我迄今为止尝试过的:
类组件:
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,
};
现在,当我运行应用程序并检查控制台时,我看到了 null。我在这里做错了什么?
解决方案
您可以创建一个bgStyle
,并更新基于 bgStyle 的on condition
. 然后你可以直接使用 ondiv
作为样式道具。
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>
);
推荐阅读
- html - 如果我修改了边距,徽标如何保持在同一位置
- python - 如何在 python 3.8 中使用 pipenv 为现有 django 项目激活虚拟环境
- php - 即使凭据不正确,PHP 中的会话变量也允许我登录
- package - 使用 JuliaPro 安装 Julia 包时出现问题
- java - 在泛型方法的参数上使用迭代器
- sql - 从 JPA 执行 sql 查询的计数不匹配
- c++ - 即使片段 alpha 为 1.0,合成器也在混合 OpenGL
- r - 如何使用条件标签在循环中制作多个 ggplots
- html - Bootstrap CSS 库不会加载
- sql - Oracle SQL - 不同 ID 格式的 substr 匹配