02 React 组件使用

js 复制代码
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;

更新复杂对象示例

js 复制代码
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;
相关推荐
软件技术NINI2 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front3 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie3 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀4 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻4 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树4 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔4 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
焚 城4 小时前
UniApp 实现双语功能
javascript·vue.js·uni-app
Asthenia04125 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端
csj505 小时前
前端基础之《React(1)—webpack简介》
前端·react