如何通过函数设置React元素的文本内容？

你的问题核心是违背了React的声明式状态管理逻辑，直接操作JSX元素的DOM属性是错误的做法：

• myParagraph是React的虚拟DOM对象，不是浏览器真实的DOM节点，所以访问textContent会报错
• React组件的UI更新应该由状态驱动，而非直接修改DOM

正确实现方式（使用useState钩子） #

函数组件中需要用useState来管理可变状态，通过更新状态让React自动重新渲染UI：

import { useState } from 'react'; // React 17+可省略，但建议显式导入

function App() {
  // 声明状态变量，初始值为'Rutabaga'
  const [veg, setVeg] = useState('Rutabaga');

  function MyClickHandler() {
    // 通过状态更新函数修改值，React会自动重新渲染组件
    setVeg('CARROT');
  }

  return (
    <>
      {/* 用状态变量控制p标签内容 */}
      <p>{veg}</p>
      <button onClick={MyClickHandler}>MY BUTTON</button>
    </>
  );
}

export default App;

为什么你之前尝试setState会报错？ #

如果是函数组件，不能直接使用类组件的this.setState，必须用useState钩子生成的状态更新函数。如果是忘记导入useState，也会导致报错，确保顶部正确导入即可。

关键理念总结 #

• React是声明式框架：你只需要描述UI应该是什么样（基于状态），React负责处理DOM更新
• 不要直接操作DOM：所有UI变化都应该通过修改状态触发
• 函数组件用useState管理局部状态，类组件用this.state和this.setState

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