Javascript 为什么该函数不能在带有JSX的codesandbox中工作

我想根据日期的时间更改颜色和h1文本，类似的代码在W3编辑器中工作，但在Codesandbox中不工作。非常感谢您的帮助

---

在React中，HTML元素是在客户端呈现的，因此在页面加载时，没有任何元素。这就是为什么

document.getElementById（“h1”）

为

null

通过React，您可以使用

useRef

hook来访问HTML元素：

---

其实很简单

const time = () => {
    // your if statements here.. return the result
    return '11am';
}

const App = props => {
    
   return (
      <h1>{ time }</h1>
   );
}

export default App;

const time=（）=>{
//您的if语句在这里..返回结果
返回“上午11点”；
}
const App=props=>{
返回(
{time}
);
}
导出默认应用程序；

因为React创建了一个虚拟DOM，所以不使用vanilla

getElementBy（）

方法

在主组件中执行逻辑时，只需更改变量值并直接在html元素中使用该值

否则，您可以导入组件并通过道具传递值

从“路径”导入组件名

在渲染中

在组件内部，只需在props中使用“text”属性

---

{props.text}

首先，当使用React时以及当您想要更改元素的值时，您应该使用变量，并在返回或呈现组件时插入它们，以便充分利用虚拟DOM

例如：

import React from 'react';

const Example = () => {
    const hourOfDay = new Date().getHours();
    
    let greeting = 'Good evening';
    if (hourOfDay <= 12) {
        greeting = 'Good morning';
    } else if (hourOfDay <= 18) {
        greeting = 'Good afternoon';
    }

    return (
        <h1>{greeting}</h1>
    );
};

export default Example;

更多信息可在此处找到：

请务必花时间阅读React文档：

---

正如@Velrin所建议的那样，您必须使用

useRef

hook来定位各个圆顶元素

您可以修改如下代码以获得相同的结果：

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  myFunction = () => {
    const hour = new Date().getHours();
    if (hour <= 12) {
      return "Good Morning";
    } else if (hour >= 12 && hour <= 18) {
      return "Good Afternoon";
    } else {
      return "Good Evening";
    }
  };
  render() {
    return (
      <div>
        <h1 id="h1">{this.myFunction()}</h1>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

从“React”导入React；
从“react dom”导入react dom；
类应用程序扩展了React.Component{
myFunction=（）=>{
const hour=新日期（）.getHours（）；
如果（hour=12&&hour）共享代码沙盒链接在react中不按Id获取元素…导入它们。我认为这是您的问题。
import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  myFunction = () => {
    const hour = new Date().getHours();
    if (hour <= 12) {
      return "Good Morning";
    } else if (hour >= 12 && hour <= 18) {
      return "Good Afternoon";
    } else {
      return "Good Evening";
    }
  };
  render() {
    return (
      <div>
        <h1 id="h1">{this.myFunction()}</h1>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));