Question

我正在使用GatsbyJS和React创建一个网站，并且试图对DOM进行更改。最初，我尝试使用JS进行此操作，但是经过研究，我找到了ReactDOM。

我在JS中尝试过，起初它可以工作，然后给我一个错误：

(function() {

const today= new Date();
const hours = today.getHours();
const minute = today.getMinutes()
const element = document.getElementById('pintar');

if (hours >= 0 && hours < 9) {
   element.innerText = 'sleeping'
}else{
   element.innerText = 'Doing something else'
}
})()

我想要做的是根据条件（if语句）在DOM中“写入”文本，该条件与当前时间相关。

当我第一次尝试解决所有问题时，但是当我改变条件并满足要求时，会出现以下错误：目标容器不是DOM元素

我从React开始，我无法对DOM进行更改。

我复制我的代码以查看必须做什么才能在DOM中进行这些更改：

import React from "react"
import { Link } from "gatsby"
import ReactDOM from 'react-dom'

import Layout from '../components/layout'
import '../styles/index.scss'
import headerStyles from '../styles/header.module.scss'
import aboutStyles from '../styles/about.module.scss'
import { IoIosArrowRoundDown } from "react-icons/io";
import Clock from 'react-digital-clock';

const today= new Date();
const hours = today.getHours();
//const minute = today.getMinutes()
const pintar = document.getElementById('pintar');
const a = 'sleeping'
const b = 'Doing something else'

if (hours >= 0 && hours < 9) {
    ReactDOM.render(a, pintar)
}else{
    ReactDOM.render(b, pintar)
}

const About = () => {

    return(
        <Layout>
            <section className={headerStyles.header_wrapper}>
                <h3 className={headerStyles.header_wrapper_title}>About me</h3>
                <h1 className={headerStyles.header_wrapper_main}>Hey there
                </h1>
            </section>
            <IoIosArrowRoundDown className={headerStyles.header_arrow} />

            <p id='pintar'></p>

            <Clock className={aboutStyles.clock} hour12={false} format={'hh-mm'} />

        </Layout>
    )

}

export default About

Answer 1

通常，当使用ReactDom.render时，您将渲染React结构之外的对象，但是在您的情况下，您将尝试渲染React结构内部的对象，因此您不应该这样做。 / p>

如果要在<p id='pintar'></p>中呈现文本，应该做的是

const About = () => {

    let pintar = ''

    // you can add any logic here and change pintar
    if (hours >= 0 && hours < 9) {
      pintar = 'something'
    } else {
      pintar = 'otherthing'
    }   

    return(
        <Layout>
            <section className={headerStyles.header_wrapper}>
                <h3 className={headerStyles.header_wrapper_title}>About me</h3>
                <h1 className={headerStyles.header_wrapper_main}>Hey there
                </h1>
            </section>
            <IoIosArrowRoundDown className={headerStyles.header_arrow} />

            // rendering pintar
            <p id='pintar'>{pintar}</p>

            <Clock className={aboutStyles.clock} hour12={false} format={'hh-mm'} />

        </Layout>
    )

}

ReactDOM：目标容器不是DOM元素

1 个答案: