html - 我似乎无法显示背景图像。背景图像出现一瞬间但随后崩溃 'failed to execute CreateElement'

Question

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

我查看了控制台日志以进一步了解它。图片显示并且背景图像在 html body styles 中正确 = 但它一直给我一个错误，说无法在 '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()

索引.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'));

错误提示无效字符错误:无法在“文档”上执行“CreateElement”。

我尝试了 3 种不同的方式来以不同方式链接 url，但它返回相同的错误!

Answer 1

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

您需要改为导出 ClockImage:

export default ClockImage;

旁注:仅仅为了更改样式而创建/渲染组件并不是一个好主意。