在 React js 中使用 setTimeOut 在 3 秒后显示文本

Question

对于 React JS 我需要在 2 秒后在

中显示文本，它在控制台中有效但在 DOM 中无效

  const items = document.getElementById("items");

  const errorDisplay = () => {
    setTimeout(function () {
      items.innerHTML = "please wait..";
      console.log(items);
    }, 2000);
  };

  <p id="items">  </p>

谢谢

  const items = document.getElementById("items");

  const errorDisplay = () => {
    setTimeout(function () {
      items.innerHTML = "please wait..";
      console.log(items);
    }, 2000);
  };

 <p id="items"> </p>

Answer 1

React 应用程序的最小示例，带有

setState

用于控制等待文本的可见性，以及

useEffect

使用

setTimeout

功能：

HTML：

<div id="root"></div>

JavaScript：

const root = ReactDOM.createRoot(document.getElementById("root"));

function App() {
  const [showWait, setShowWait] = React.useState(false);

  React.useEffect(() => {
    const timer = setTimeout(() => {
      setShowWait(true);
      console.log("please wait ...");
    }, 3000);
    return () => clearTimeout(timer);
  }, []);

  return showWait && <p>please wait...</p>;
}

root.render(<App></App>);

见https://codepen.io/michaeljoh/pen/RweVBpJ