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

01 React新建开发环境

https://create-react-app.dev/docs/getting-started

npx create-react-app my-app

JSX使用表达式嵌入

function App() {const count = 100;function getSelfName() {return "SelfName"}return (<div>Hello World!<div>{'This is Javascript message~!'}</div><div>{count}</div><div>{getSelfName()}</div><div>{new Date().getDate()}</div><div style={{color: "red"}}>This red Div</div></div>);
}export default App;

实现列表渲染

import React from 'react';const data = [{id: 1, name: 'Alice', sex: 'Female', phone: '123-456-7890'},{id: 2, name: 'Bob', sex: 'Male', phone: '987-654-3210'},{id: 3, name: 'Charlie', sex: 'Male', phone: '555-123-4567'}
];function App() {return (<div><ul>{data.map(user => (<li key={user.id}><div>ID: {user.id}</div><div>Name: {user.name}</div><div>Sex: {user.sex}</div><div>Phone: {user.phone}</div></li>))}</ul></div>);
}export default App;

根据条件渲染对应界面

function App() {const loggedIn = true;return (<div><div>{loggedIn ? (<h1>Welcome User!</h1>) : (<button onClick={() => alert('log in')}>Log In</button>)}</div><div>{loggedIn && <h2>Welcome User h2</h2>}</div></div>);
}

使用函数渲染复杂对应界面

import React from 'react';function ComponentA() {return <h1>This is Component A</h1>;
}function ComponentB() {return <h1>This is Component B</h1>;
}function App() {const condition = true; // 设置条件,可以根据需要修改const renderComponent = () => {if (condition) {return <ComponentA />;} else {return <ComponentB />;}};return (<div>{renderComponent()}</div>);
}export default App;

当在React中为按钮添加事件时,你可以使用onClick属性来指定一个函数,在按钮被点击时触发该函数。以下是一些使用React为按钮添加事件的常见示例:

1. 基本用法:

import React from 'react';class MyComponent extends React.Component {handleClick() {console.log('Button clicked!');}render() {return (<button onClick={this.handleClick}>Click me</button>);}
}export default MyComponent;

2. 传递参数:

import React from 'react';class MyComponent extends React.Component {handleClick(param) {console.log('Button clicked with param:', param);}render() {return (<button onClick={() => this.handleClick('Hello')}>Click me</button>);}
}export default MyComponent;

3. 使用箭头函数:

import React from 'react';class MyComponent extends React.Component {handleClick = () => {console.log('Button clicked!');}render() {return (<button onClick={this.handleClick}>Click me</button>);}
}export default MyComponent;

4. 使用Hooks:

import React, { useCallback } from 'react';const MyComponent = () => {const handleClick = useCallback(() => {console.log('Button clicked!');}, []);return (<button onClick={handleClick}>Click me</button>);
};export default MyComponent;

5. 使用函数组件:

import React from 'react';const MyComponent = () => {const handleClick = () => {console.log('Button clicked!');};return (<button onClick={handleClick}>Click me</button>);
};export default MyComponent;

6. 事件对象:

import React from 'react';class MyComponent extends React.Component {handleClick(event) {console.log('Button clicked!');console.log('Event object:', event);}render() {return (<button onClick={this.handleClick}>Click me</button>);}
}export default MyComponent;

7. 阻止默认行为:

import React from 'react';class MyComponent extends React.Component {handleClick(event) {event.preventDefault();console.log('Default behavior prevented!');}render() {return (<button onClick={this.handleClick}>Click me</button>);}
}export default MyComponent;

8. 事件对象和自定义参数:

import React from 'react';class MyComponent extends React.Component {handleClick = (event, customParam) => {event.preventDefault(); // 阻止默认行为console.log('Button clicked!');console.log('Custom parameter:', customParam);console.log('Event object:', event);}render() {const customParam = 'Hello'; // 自定义参数return (<button onClick={(event) => this.handleClick(event, customParam)}>Click me</button>);}
}export default MyComponent;

相关文章:

01 React新建开发环境

https://create-react-app.dev/docs/getting-started npx create-react-app my-appJSX使用表达式嵌入 function App() {const count 100;function getSelfName() {return "SelfName"}return (<div>Hello World!<div>{This is Javascript message~!}&l…...

nginx--解决响应头带Set-Cookie导致的验证失败

解决响应头带Set-Cookie导致的验证失败 前言给nginx.conf 设置Secure配置完成后会发现cookie就不会发生变化了 前言 在用nginx做代理的时候&#xff0c;会发现nginx在访问不同ip请求的时候会带setCookie 导致后端就是放开cookie验证&#xff0c;在访问玩这个链接他更新了cooki…...

InstructGPT的流程介绍

1. Step1&#xff1a;SFT&#xff0c;Supervised Fine-Tuning&#xff0c;有监督微调。顾名思义&#xff0c;它是在有监督&#xff08;有标注&#xff09;数据上微调训练得到的。这里的监督数据其实就是输入Prompt&#xff0c;输出相应的回复&#xff0c;只不过这里的回复是人工…...

docker容器下部署hbase并在springboot中通过jdbc连接

我在windows的docker中部署了一个hbase服务&#xff0c;然后用springboot连接到此服务并访问数据。 详情可参考项目中的README.md。项目中提供了用于构建镜像的dockerfile&#xff0c;以及测试代码。 项目连接&#xff1a; https://gitee.com/forgot940629/hbase_phoenix_sprin…...

Qt——智能指针实战

目录 前言正文一、理论介绍1、QPointer2、QScopedPoint3、QSharedPoint4、QWeakPoint 二、实战演练1、QPoint2、QScopedPoint3、QSharedPointa、示例一b、示例二 4、QWeakPoint END、总结的知识与问题 参考 前言 智能指针的使用&#xff0c;对很多程序员来说&#xff0c;都算是…...

Unity Mobile Notifications推送问题

1.在部分机型点击通知弹窗进不去游戏 把这里改成自己的Activity 2.推送的时候没有横幅跟icon红点 主要是第一句话 注册的时候选项可以选择 defaultNotificationChannel new AndroidNotificationChannel(“default_channel”, “Default Channel”, “For Generic notifica…...

C++_回文串

目录 回文子串 最长回文子串 分割回文串 IV 分割回文串 II 最长回文子序列 让字符串成为回文串的最少插入次数 回文子串 647. 回文子串 思路&#xff0c;i j表示改范围内是否为回文串&#xff0c; ②倒着遍历是为了取出dp[i 1][j - 1] ③i j 只有一对&#xff0c;不会重复…...

【阅读论文】When Large Language Models Meet Vector Databases: A Survey

摘要 本调查探讨了大型语言模型&#xff08;LLM&#xff09;和向量数据库&#xff08;VecDB&#xff09;之间的协同潜力&#xff0c;这是一个新兴但迅速发展的研究领域。随着LLM的广泛应用&#xff0c;出现了许多挑战&#xff0c;包括产生虚构内容、知识过时、商业应用成本高昂…...

兼职副业大揭秘:六个潜力满满的赚钱途径

亲爱的朋友&#xff0c;你对兼职副业充满好奇与期待&#xff0c;这非常好&#xff01;在此&#xff0c;我将为你分享一些能够助你赚取额外收入的兼职副业建议。以下是六个颇具潜力的兼职副业方向&#xff0c;希望能为你的探索之路提供些许启发。 1&#xff0c;网络调查与市场洞…...

C++ Qt开发:QUdpSocket实现组播通信

Qt 是一个跨平台C图形界面开发库&#xff0c;利用Qt可以快速开发跨平台窗体应用程序&#xff0c;在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置&#xff0c;实现图形化开发极大的方便了开发效率&#xff0c;本章将重点介绍如何运用QUdpSocket组件实现基于UDP的组播通信…...

excel 表中有图片并在筛选特定行时,只显示该行的图片

建议&#xff1a;选中excel 表中某张图片&#xff0c;CtrlA&#xff0c;选中所有图片。再右键&#xff0c;在菜单中选设置对象格式 在属性里按下图设置&#xff0c; 生效之后&#xff0c;筛选某个产品的时候&#xff0c;就不会显示其他的不符合筛选条件的产品的图片了。...

【QA】MySQL多表查询详解

文章目录 前言关系型数据库中数据表之间的关系数据准备数据内容表间关系 基础查询 | 全部查询多表查询分类1 | 连接查询内连接外连接 | 左外连接外连接 | 右外连接自连接 | 自连接自连接 | 联合查询 分类2 | 子查询返回结果分类 | 标量子查询返回结果分类 | 列子查询返回结果分…...

【Entity Framework】 EF三种开发模式

【Entity Framework】 EF三种开发模式 文章目录 【Entity Framework】 EF三种开发模式一、概述二、DataBase First2.1 DataBase First简介2.2 DataBase First应用步骤2.3 DataBase First总结 三、Model First3.1 Model First简介3.2 Model First实现步骤 四、Code First4.1 Cod…...

数据分析---SQL(5)

目录 子查询单行子查询多行子查询视图(View)创建视图使用视图更新视图视图的优缺点存储过程存储过程的创建存储过程的参数存储过程的优缺点可能导致性能问题避免存储过程引入性能问题子查询 子查询是指在一个查询语句中嵌套另一个查询语句,内部的查询语句称为子查询,外部的…...

《剑指 Offer》专项突破版 - 面试题 93 : 最长斐波那契数列(C++ 实现)

题目链接&#xff1a;最长斐波那契数列 题目&#xff1a; 输入一个没有重复数字的单调递增的数组&#xff0c;数组中至少有 3 个数字&#xff0c;请问数组中最长的斐波那契数列的长度是多少&#xff1f;例如&#xff0c;如果输入的数组是 [1, 2, 3, 4, 5, 6, 7, 8]&#xff0…...

代码随想录算法训练营第五十五天|583. 两个字符串的删除操作、72. 编辑距离

583. 两个字符串的删除操作 刷题https://leetcode.cn/problems/delete-operation-for-two-strings/description/文章讲解https://programmercarl.com/0583.%E4%B8%A4%E4%B8%AA%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E5%88%A0%E9%99%A4%E6%93%8D%E4%BD%9C.html视频讲解https://…...

StringRedisTemplate Autowired注入为空解决

如下注入方式报空指针异常&#xff1a; java.lang.NullPointerException: null Autowiredprivate StringRedisTemplate redisTemplate; 解决办法&#xff1a;查看该类上有没有加注解&#xff0c;如Component等&#xff0c;没加的话加上。 还有一种是在工具类中使用&#xff0c;…...

c语言:文件操作

1. 为什么使⽤⽂件&#xff1f; 如果没有⽂件&#xff0c;我们写的程序的数据是存储在电脑的内存中&#xff0c;如果程序退出&#xff0c;内存回收&#xff0c;数据就丢失 了&#xff0c;等再次运⾏程序&#xff0c;是看不到上次程序的数据的&#xff0c;如果要将数据进⾏持久…...

C#事件实例详解

一、什么是事件&#xff1f; 在C#中,事件(event)是一种特殊的类成员,它允许类或对象通知其他类或对象发生了某些事情。 从语法上看,事件的声明类似于字段,但它们在功能和行为上有一些重要的区别。 从技术角度来说,事件实际上是一个封装了事件订阅和取消订阅功能的委托字段。…...

零基础机器学习(3)之机器学习的一般过程

文章目录 一、机器学习一般过程1.数据获取2.特征提取3.数据预处理①去除唯一属性②缺失值处理A. 均值插补法B. 同类均值插补法 ③重复值处理④异常值⑤数据定量化 4.数据标准化①min-max标准化&#xff08;归一化&#xff09;②z-score标准化&#xff08;规范化&#xff09; 5.…...

事件驱动视觉革命:EVS技术如何重塑机器感知的未来格局

1. EVS技术&#xff1a;重新定义机器视觉的游戏规则 想象一下你正坐在高速行驶的列车上&#xff0c;窗外风景飞速掠过。传统相机就像每隔几秒才按下一次快门的游客&#xff0c;拍到的全是模糊不清的照片&#xff1b;而EVS&#xff08;事件驱动视觉传感器&#xff09;则像专业摄…...

避开这3个坑!Cortex-M3/M4使用DWT计数器时的常见错误与解决方法

Cortex-M3/M4开发实战&#xff1a;DWT计数器避坑指南与高阶应用技巧 在嵌入式系统开发中&#xff0c;精确的时间测量往往是性能优化和调试的关键。Cortex-M3/M4内核内置的DWT(Data Watchpoint and Trace)组件&#xff0c;特别是其CYCCNT计数器&#xff0c;为开发者提供了一个零…...

实时行情系统设计:从协议选择到高可用架构,再到数据源选型

一、核心问题及解决方案&#xff08;按踩坑频率排序&#xff09; 问题 1&#xff1a;误删他人持有锁——最基础也最易犯的漏洞 成因&#xff1a;释放锁时未做身份校验&#xff0c;直接执行 DEL 命令删除键。典型场景&#xff1a;服务 A 持有锁后&#xff0c;业务逻辑耗时超过锁…...

从三角函数到雷达滤波:三角窗的DSP实现与性能测试全记录

从三角函数到雷达滤波&#xff1a;三角窗的DSP实现与性能测试全记录 1. 三角窗的数学本质与信号处理价值 在数字信号处理领域&#xff0c;窗函数就像是一位精密的调音师&#xff0c;能够对原始信号进行细致的修饰和调整。三角窗作为其中最基础却又最富特色的成员之一&#xff0…...

实战向 Python 汽车推荐系统 Django框架 可视化 协同过滤算法 数据分析 大数据 机器学习(建议收藏)✅

博主介绍&#xff1a;✌全网粉丝10W,前互联网大厂软件研发、集结硕博英豪成立工作室。专注于计算机相关专业项目实战6年之久&#xff0c;选择我们就是选择放心、选择安心毕业✌ > &#x1f345;想要获取完整文章或者源码&#xff0c;或者代做&#xff0c;拉到文章底部即可与…...

全网资源一键下载:res-downloader终极资源嗅探工具使用指南

全网资源一键下载&#xff1a;res-downloader终极资源嗅探工具使用指南 【免费下载链接】res-downloader 视频号、小程序、抖音、快手、小红书、直播流、m3u8、酷狗、QQ音乐等常见网络资源下载! 项目地址: https://gitcode.com/GitHub_Trending/re/res-downloader 还在为…...

Neo4j关系创建失败?手把手教你处理GraphRAG生成的异常ID格式(含正则清洗技巧)

Neo4j关系创建失败&#xff1f;手把手教你处理GraphRAG生成的异常ID格式&#xff08;含正则清洗技巧&#xff09; 当你满怀期待地将GraphRAG生成的知识图谱数据导入Neo4j&#xff0c;准备欣赏可视化成果时&#xff0c;却发现关系创建失败——这可能是每个数据工程师都经历过的噩…...

KingbaseES V008R006C008B0014物理备份实战:sys_rman从配置到自动化的完整避坑指南

KingbaseES物理备份实战&#xff1a;从sys_rman配置到自动化运维的深度解析 凌晨三点&#xff0c;数据库告警铃声突然响起——某核心业务系统的KingbaseES实例因磁盘故障导致数据丢失。此时&#xff0c;一个配置得当的sys_rman物理备份系统将成为最后的救命稻草。不同于简单的操…...

MySQL数据库基础聚合函数

聚合函数...

BT33F双基二极管的基本特性

简 介&#xff1a; 本文测试了BT33F双基二极管的特性&#xff0c;发现其发射极对两个基极呈现不同导通电压&#xff08;0.86V和1.6V&#xff09;&#xff0c;B1、B2间电阻约13KΩ。实验表明&#xff0c;只有当B1接地、B2接5V电源时&#xff0c;电路才能产生46Hz的振荡信号&…...