如何在反应中使用 document.querySelector().innerHTML

【问题标题】：how to use document.querySelector().innerHTML in react如何在反应中使用 document.querySelector().innerHTML
【发布时间】：2019-06-21 18:17:15
【问题描述】：

我正在尝试显示当前时间，但不知道如何完成。

function timer()
{
  let today = new Date(),
    hours = today.getHours(),
    minutes = today.getMinutes(),
    seconds = today.getSeconds();
    console.log(hours+'/'+minutes+'/'+seconds)


  setTimeout(timer,1000)
}


function App() {
  return (
    <div >

      <h1>Timer</h1>
      <h1 id='time'>Time : {timer()}</h1>
    </div>
  );
}

我希望输出为 Time : 12/5/12（即当前时间）

【问题讨论】：

这是在文档中使用状态的示例：reactjs.org/docs/state-and-lifecycle.html

标签： reactjs

【解决方案1】：

你不要直接修改DOM你使用你的组件的返回来渲染和修改HTML

首先，您需要使用useState 将time 保存在组件state 中。

其次，您需要使用 useEffect 获取组件挂载的时间

然后将保存在组件state中的time渲染到DOM中

function App() {
  const [time, setTime] = useState(null);

  useEffect(() => {
    let today = new Date(),
      hours = today.getHours(),
      minutes = today.getMinutes(),
      seconds = today.getSeconds();

    const now = hours + "/" + minutes + "/" + seconds;
    console.log(now);

    setTime(now);
  }, []);

  return (
    <div>
      <h1>Timer</h1>
      {time && <h1 id="time">Time : {time}</h1>}
    </div>
  );
}

【讨论】：