在 React 页面上动态添加元素

Question

我必须在一列中打印 10 个元素，例如 1,2,3 ...，超时时间为 1 秒。但是在我的代码中我不知道如何循环打印消息。我尝试使用 innerHTML，但我认为这不是正确的做法。

import { useState } from 'react'

export default function Timeout() {
  const [message, setMessage] = useState(1)

  while (message <= 10) {
    setTimeout(() => {
      setMessage(message)
    }, 1000)
    message++
  }

  return <div>{message}</div>
}

Answer 1

试试这个：

import { useState } from 'react'

export default function Timeout() {
  const [message, setMessage] = useState([1])

  setTimeout(() => {
    message.length <= 10 && setMessage((perv)=>[...perv,perv.length + 1]);
  }, 1000)

  return <div>{message.map((item)=>item}</div>
}

Answer 2

试试这个：

import {useState } from "react";

export default function Timeout() {
 const [message, setMessage] = useState([1]);
  const Markup = (
   <ul>
    {message?.map((n) => (
    <li>{n}</li>
    ))}
   </ul>
  );
  setTimeout(() => {
  if (message.length <= 9) {
    setMessage([...message, message[message.length - 1] + 1]);
  }
 }, 1000);

 return <div>{Markup}</div>;
}

在 React 页面上动态添加元素

Add elements dynamically on a page in React

reactjs

next.js