React JS实现点击按钮修改h1标签文本值的问题咨询

核心使用React内置的useState状态钩子实现动态内容修改，修改后的完整代码如下：

import { useState } from 'react';
import Button from 'react-bootstrap/Button';
import './App.css';
import { Container } from 'react-bootstrap';
import { Row } from 'react-bootstrap';

function App() {
  // 声明状态存储h1文本，初始值为默认展示内容
  const [titleText, setTitleText] = useState("this text should change");

  return (
    <Container>
      <Row className="Row">
        <div className="frame">
          {/* h1内容绑定状态变量 */}
          <h1>{titleText}</h1>
          {/* 绑定点击事件，点击后修改状态值 */}
          <Button 
            className="btn btn1" 
            color="light"
            onClick={() => setTitleText("你选择了YES")}
          >
            YES
          </Button>
          <Button 
            className="btn btn2" 
            color="light"
            onClick={() => setTitleText("你选择了NO")}
          >
            NO
          </Button>
        </div>
      </Row>
    </Container>
  );
}

export default App;

• 运行逻辑：React组件渲染内容依赖状态，调用setTitleText更新状态后组件会自动重新渲染，h1文本会同步更新，你可以自行修改setTitleText的传值自定义点击后展示的内容。

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