React中函数内直接操作DOM报错？求该代码的正确React写法

报错原因 #

• 组件函数执行时，React还没完成DOM渲染，<p id='demo'></p>还未挂载到页面上，document.getElementById("demo")会返回null，尝试给null设置innerHTML自然触发报错。
• console.log()仅执行打印操作，不会访问DOM元素的属性，因此不会触发报错。

React正确写法 #

方式一：使用状态管理（React推荐） #

React核心是状态驱动视图，通过useState管理内容，React会自动更新DOM，无需手动操作：

import { useState, useEffect } from 'react';

function App() {
  const [demoText, setDemoText] = useState("");

  function f() {
    setDemoText("Hello");
  }

  // 组件挂载完成后调用f
  useEffect(() => {
    f();
  }, []);

  return (
    <div>
      <p>{demoText}</p>
    </div>
  )
}

export default App;

方式二：手动操作DOM（仅特殊场景使用） #

如果必须直接操作DOM，用useEffect钩子确保DOM已挂载后再执行操作：

import { useEffect } from 'react';

function App() {
  function f() {
    const demoElement = document.getElementById("demo");
    if (demoElement) {
      demoElement.innerHTML = "Hello";
    }
  }

  // 空依赖数组表示仅在组件挂载时执行一次
  useEffect(() => {
    f();
  }, []);

  return (
    <div>
      <p id='demo'></p>
    </div>
  )
}

export default App;

内容的提问来源于stack exchange，提问作者Aykut Bayram