02React组件使用

import React, { useState } from 'react'; // 定义一个简单的函数式组件 function Counter() { // 使用 useState hook 来创建一个状态变量 count，并提供修改该状态的函数 setCount const [count, setCount] = useState(0); // 在点击按钮时增加计数器的值 const incrementCount = () => { setCount(count + 1); }; // 在点击按钮时减少计数器的值 const decrementCount = () => { setCount(count - 1); }; return ( <div> <h2>计数器</h2> <p>当前计数：{count}</p> {/* 点击按钮时触发 incrementCount 函数 */} <button onClick={incrementCount}>增加</button> {/* 点击按钮时触发 decrementCount 函数 */} <button onClick={decrementCount}>减少</button> </div> ); } // 使用 Counter 组件的例子 function App() { return ( <div> <h1>React 组件示例</h1> {/* 渲染 Counter 组件 */} <Counter /> </div> ); } export default App;

更新复杂对象示例

import React, {useState} from 'react'; function ComplexObjectExample() { // 定义初始状态，一个包含姓名和年龄的复杂对象 const [person, setPerson] = useState({name: 'John', age: 30}); // 更新姓名的函数 const updateName = () => { // 使用对象解构来创建一个新的 person 对象，并只更新姓名 setPerson({...person, name: 'Jane'}); }; // 更新年龄的函数 const updateAge = () => { // 使用对象解构来创建一个新的 person 对象，并只更新年龄 setPerson({...person, age: 35}); }; return ( <div> <h2>Person Information</h2> <p>Name: {person.name}</p> <p>Age: {person.age}</p> <button onClick={updateName}>Update Name</button> <button onClick={updateAge}>Update Age</button> </div> ); } // 使用 Counter 组件的例子 function App() { return ( <div> <h1>React 组件示例</h1> {/* 渲染 Counter 组件 */} <ComplexObjectExample/> </div> ); } export default App;