帮我用react写一个实时显示时间的函数

好的，下面是一个简单的实现：

import React, { useState, useEffect } from 'react';

function Clock() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date());
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <h1>Current Time:</h1>
      <h2>{time.toLocaleTimeString()}</h2>
    </div>
  );
}

export default Clock;

这个函数组件使用了React的`useState`和`useEffect`hooks来实现实时显示时间。`useState`用于保存当前时间，`useEffect`用于在组件挂载和更新时启动一个定时器，每秒钟更新一次时间。最后，返回一个包含当前时间的`<h2>`元素。

相关问题

react 写一个10s倒计时

好的，以下是一个简单的 React 组件，实现了一个 10 秒的倒计时：

import React, { useState, useEffect } from "react";

function Countdown() {
  const [timeLeft, setTimeLeft] = useState(10);

  useEffect(() => {
    const timerId = setInterval(() => {
      setTimeLeft((prevTime) => prevTime - 1);
    }, 1000);

    return () => {
      clearInterval(timerId);
    };
  }, []);

  return <div>{timeLeft} seconds left</div>;
}

首先，我们使用 `useState` hook 来定义一个状态变量 `timeLeft`，初始值为 10，表示剩余时间。然后，我们使用 `useEffect` hook 来实现定时器的功能。在 `useEffect` 的回调函数中，我们使用 `setInterval` 创建一个定时器，每隔一秒钟减少 `timeLeft` 的值。同时，我们也在 `useEffect` 的返回函数中清除定时器，避免内存泄漏。

最后，我们在组件中返回一个简单的 UI，显示剩余时间。

使用react和ts写一个todolist(回车添加待办)并用dayjs显示事件创建时间

好的，以下是代码实现：

import React, { useState } from 'react';
import dayjs from 'dayjs';

interface TodoItem {
  content: string;
  createdAt: Date;
}

const TodoList: React.FC = () => {
  const [inputValue, setInputValue] = useState('');
  const [todoList, setTodoList] = useState<TodoItem[]>([]);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
  };

  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      const newTodo = {
        content: inputValue,
        createdAt: new Date(),
      };
      setTodoList([...todoList, newTodo]);
      setInputValue('');
    }
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        placeholder="Add new todo"
        value={inputValue}
        onChange={handleInputChange}
        onKeyDown={handleInputKeyDown}
      />
      <ul>
        {todoList.map((todo, index) => (
          <li key={index}>
            {todo.content}
            <span>{dayjs(todo.createdAt).format('YYYY-MM-DD HH:mm:ss')}</span>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

首先定义了一个 `TodoItem` 接口表示待办事项的类型，包含内容和创建时间两个属性。

然后定义了一个 `TodoList` 组件，状态包括输入框的值和待办事项列表。输入框的值和列表都是用 `useState` 来管理的。

在输入框的值发生变化时，通过 `handleInputChange` 函数更新输入框的值。在按下回车键时，会创建一个新的待办事项对象，并将其添加到列表中。同时清空输入框的值。

在渲染列表时，使用 `map` 函数遍历列表中的每个待办事项，渲染出待办事项的内容和创建时间。创建时间使用 `dayjs` 库进行格式化。