为什么该功能在 JSX 的代码沙箱中不起作用

Question

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

Codesandbox code and error

W3 editor

Answer 1

在 React 中，HTML 元素是在客户端呈现的，所以在页面加载的那一刻，没有任何元素。这就是为什么document.getElementById("h1") 是null。

使用 React，您可以使用 useRef 钩子来访问 HTML 元素： https://reactjs.org/docs/hooks-reference.html#useref

Answer 2

其实很简单……

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

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

export default App;

因为 React 创建了一个虚拟 DOM，所以没有使用普通的 getElementBy() 方法。

当您在主组件中执行逻辑时，您可以简单地更改变量值并直接在 html 元素中使用该值。

否则你可以导入组件并通过props传递值。

import ComponentName from 'path'

在渲染中

<ComponentName text={ time } />

在组件内部，只需使用 props 中的 'text' 属性

<h1>{ props.text }</h1>

Answer 3

首先，在使用 React 时，当你想改变一个元素的值时，你应该使用变量并在返回或渲染你的组件时插入它们，以充分利用 Virtual 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;

注意我是如何在<h1> 元素中使用greeting 变量的。

请记住，上面的示例使用的是函数组件： https://reactjs.org/docs/components-and-props.html

为了在基于 React 的项目中改变样式，你可以在渲染或返回组件/函数时使用元素的 style 属性：

import React from 'react';

const Example = () => {
    const hourOfDay = new Date().getHours();

    let greeting = 'Good evening';
    let color = 'red';

    if (hourOfDay <= 12) {
        color = 'green';
        greeting = 'Good morning';
    } else if (hourOfDay <= 18) {
        color = 'blue';
        greeting = 'Good afternoon';
    }

    return (
        <h1 style={{color: color}}>{greeting}</h1>
    );
};

export default Example;

更多信息可以在这里找到：
https://reactjs.org/docs/dom-elements.html#style

请花点时间阅读 React 文档：
https://reactjs.org/docs/getting-started.html#learn-react

Answer 4

正如@Velrin 所建议的，您必须使用useRef 挂钩来定位单个圆顶元素。

你可以像下面这样修改代码来达到同样的效果：

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"));

工作应用演示：Stackblitz