当前位置：首页 > news >正文

02 React 组件使用

news 2025/7/18 22:57:04

import React, { useState } from 'react';// 定义一个简单的函数式组件
function Counter() {// 使用 useState hook 来创建一个状态变量 count，并提供修改该状态的函数 setCountconst [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;