Javascript 如何使用react refs设置背景图像？

我想使用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,
};

从“React”导入React；
从“道具类型”导入道具类型；
从“类名称”导入类名称；
导出默认类CalendarDay扩展React.Component{
建造师（道具）{
超级（道具）；
this.backgroundImageRef=React.createRef（）；
}
渲染（）{
让{day，isToday，events，onClick}=this.props；
const dayClasses=类名({
“flexColumn”：是，
“day”：没错，
“非活动”：天。同级月份，
"今天":，
});
if（typeof day.eventSlots！=“未定义”&&day.eventSlots.length>0）{
让getEventData=Object.values（day.eventSlots）[0].EventClass；
开关（getEventData）{
案例“事件1”：
让getInnerGrid=this.backgroundImageRef.current；
console.log（getInnerGrid）；//返回null
//event1.style.backgroundImage=“url（'../images/eventbg1.svg'）”；
console.log（getEventData）；
打破
违约：
打破
}
} 
返回(
{day.day}
{events}
);
}
}
CalendarDay.propTypes={
日期：PropTypes.object.isRequired，
isToday:PropTypes.bool，
事件：PropTypes.array，
onClick:PropTypes.func，
};

---

现在，当我运行应用程序并检查控制台时，我看到空值。我做错了什么？

您可以创建一个

bgStyle

，并根据条件更新bgStyle-based

。然后你可以直接使用on
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>
);

让bgStyle={}
if（typeof day.eventSlots！=“未定义”&&day.eventSlots.length>0）{
让getEventData=Object.values（day.eventSlots）[0].EventClass；
开关（getEventData）{
案例“事件1”：
bgStyle.backgroundImage=“url（'../images/eventbg1.svg'）”
打破
违约：
打破
}
} 
返回(
{day.day}
{events}
);
您可以创建
bgStyle
，并根据条件更新bgStyle
。然后你可以直接使用on
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>
);

让bgStyle={}
if（typeof day.eventSlots！=“未定义”&&day.eventSlots.length>0）{
让getEventData=Object.values（day.eventSlots）[0].EventClass；
开关（getEventData）{
案例“事件1”：
bgStyle.backgroundImage=“url（'../images/eventbg1.svg'）”
打破
违约：
打破
}
} 
返回(
{day.day}
{events}
);
为什么要使用ref而不是
样式
道具？请分享一个小演示。这将有助于调试更多内容。@NicholasTower我如何在这里使用style道具？您可以通过代码显示它吗？为什么要使用ref而不是
style
道具？您可以分享一个小演示吗。这将有助于调试更多内容。@NicholasTower我如何在这里使用style prop？您可以通过代码显示它吗？