我似乎无法显示背景图像。瞬间显示背景图像，但随后崩溃，“执行CreateElement失败”

Question

我尝试根据时间更改backgroundImage，但是对document.body.style.backgroundImage使用if-else函数

我已经查看了控制台日志以进一步了解它。图片显示出来，并且背景图片正确显示在html正文样式中，但是它一直给我一个错误，提示无法在'Document'上执行'createElement']

import React from 'react';

import lo from "/Users/justinandhang/Desktop/menu/menu2/src/photo/lo.png"


function ClockImage() {
    const date = new Date()
    const hours = date.getHours()
    let timeOfDay
    if (hours < 12) {
        return document.body.style.backgroundImage = 'url("'+lo+'")'

    }
    else if (hours >= 12 && hours < 17) {
        return document.body.style.backgroundImage = `url("${lo}")`
    }else {
        return document.body.style.backgroundImage = 'url("/Users/justinandhang/Desktop/menu/menu2/src/photo/lo.png")'     
    }


}

export default ClockImage()
Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import MenuContainer from "./MenuContainer"
import city from "/Users/justinandhang/Desktop/menu/menu2/src/photo/turntable_vignette.gif"
import lo from "/Users/justinandhang/Desktop/menu/menu2/src/photo/lo.png"
import ClockImage from "/Users/justinandhang/Desktop/menu/menu2/src/ClockImage.js"



ReactDOM.render(
    <div>
        <ClockImage />
        <MenuContainer />
    </div>
    , document.getElementById('container'));
错误显示无效字符错误：无法在'Document'上执行'CreateElement'。

我尝试了3种不同的方式来不同地链接URL，但它返回相同的错误！

我尝试根据时间更改backgroundImage，但是将if-else函数与document.body.style.backgroundImage一起使用，我已经查看了控制台日志以进一步查看它。图片...

Answer 1

您收到该错误是因为您导出的是先调用该函数的ClockImage()，然后导出返回的值，并且在index.js中，React无法渲染ClockImage，因为它不是组件。