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;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/770787.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

荟萃分析R Meta-Analyses 3 Effect Sizes

总结 效应量是荟萃分析的基石。为了进行荟萃分析&#xff0c;我们至少需要估计效应大小及其标准误差。 效应大小的标准误差代表研究对效应估计的精确程度。荟萃分析以更高的精度和更高的权重给出效应量&#xff0c;因为它们可以更好地估计真实效应。 我们可以在荟萃分析中使用…

【Golang星辰图】大数据时代的明星工具:深入了解Go语言数据处理和分析库

高效处理数据&#xff0c;驾驭大数据时代&#xff1a;深入学习Go语言数据处理库 前言 在当今互联网时代&#xff0c;数据处理和分析变得越来越重要。随着数据规模的不断增大&#xff0c;如何高效地处理和分析数据成为了许多企业和开发者面临的挑战。为了满足这一需求&#xf…

面试算法-102-LRU 缓存

题目 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类&#xff1a; LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存 int get(int key) 如果关键字 key 存在于缓存中&#xff0c;则返回关键字的值&#xff0c;否则返…

JavaScript-Web学习笔记02

三、事件高级 1、注册事件&#xff08;绑定事件&#xff09; 注册事件概述 给元素添加事件&#xff0c;称为注册事件或者绑定事件。 注册时间有两种方式&#xff1a;传统方式和方法监听注册方式 传统注册方式 利用 on 开头的事件 onclick<button onclick "alert(hi~)…

软考高级架构师:MVP 架构概念和例题

作者&#xff1a;明明如月学长&#xff0c; CSDN 博客专家&#xff0c;大厂高级 Java 工程师&#xff0c;《性能优化方法论》作者、《解锁大厂思维&#xff1a;剖析《阿里巴巴Java开发手册》》、《再学经典&#xff1a;《Effective Java》独家解析》专栏作者。 热门文章推荐&am…

Spring - AOP/事务 实现原理

AOP 基本概念 官方文档&#xff1a; Aspect Oriented Programming with Spring Spring AOP supports the following AspectJ pointcut designators (PCD) for use in pointcut expressions: within - limits matching to join points within certain types (simply the exec…

Visual Studio项目编译和运行依赖第三方库的项目

1.创建项目&#xff0c;这里创建的项目是依赖于.sln的项目&#xff0c;非CMake项目 2.添加第三方库依赖的头文件和库文件路劲 3.添加第三方依赖库文件 4.项目配置有2个&#xff0c;一个是Debug&#xff0c;一个是Release&#xff0c;如果你只配置了Debug&#xff0c;编译和运行…

表的创建,删除,插入,修改

目录 一、表的创建 二、表的删除 三、插入数据insert (DML) 四、函数format str_to_date date_format 五、date和datetime两个类型的区别? 六、数据库修改update&#xff08;DML&#xff09; 七、删除数据delete 一、表的创建 1、建表的语法格式:(建表属…

Unity 视频组件 VideoPlayer

组件添加&#xff1a; 在自己定义的组件下&#xff08;例如&#xff1a;Panel&#xff09; 点击 Inspector 面板中的 AddComponent &#xff0c;输入“VideoPlayer”。 资源 这里 视频资源有两种形式&#xff0c;第一种是 VideoClip &#xff0c;需要将视频文件拖拽到该属性字段…

喜报 | 聚合科技荣获江苏省数字经济学会科学技术奖

近日&#xff0c;江苏省数字经济学会公布了2023年度江苏省数字经济学会科学技术奖获奖名单。本次在全省范围内共评选出科学技术进步奖、科学技术创新奖、优秀成果奖获奖项目共计19项。“聚合数据资产服务API平台”凭借其前沿的创新性和优秀的应用前景成功获得科学技术创新奖二等…

说说Loader和Plugin的区别?编写Loader,Plugin的思路?

文章目录 一、区别二、编写loader三、编写plugin参考文献 一、区别 前面两节我们有提到Loader与Plugin对应的概念&#xff0c;先来回顾下 loader 是文件加载器&#xff0c;能够加载资源文件&#xff0c;并对这些文件进行一些处理&#xff0c;诸如编译、压缩等&#xff0c;最终…

FFmpeg开发笔记(十四)音频重采样的缓存

FFmpeg在很多地方都运用了缓存机制&#xff0c;比如《FFmpeg开发实战&#xff1a;从零基础到短视频上线》一书的“3.3.2 对视频流重新编码”介绍了编解码的数据缓存&#xff0c;不单是视频编码过程和视频解码过程有缓存&#xff0c;甚至连音频重采样都用到了缓存。 也就是说&a…

基于TensorFlow的花卉识别(算能杯)%%%

Anaconda Prompt 激活 TensorFlow CPU版本 conda activate tensorflow_cpu //配合PyCharm环境 直接使用TensorFlow1.数据分析 此次设计的主题为花卉识别&#xff0c;数据为TensorFlow的官方数据集flower_photos&#xff0c;包括5种花卉&#xff08;雏菊、蒲公英、玫瑰、向日葵…

4、Jenkins持续集成-用户权限和凭证管理

文章目录 一、用户权限管理1、安装用户权限管理插件2、开启权限全局安全配置3、创建角色4、创建用户5、给用户分配角色6、创建项目测试权限二、凭证管理1、安装凭证管理插件2、安装Git插件和工具2.1 用户密码类型2.2 SSH密钥类型一、用户权限管理 利用Role-based Authorizatio…

UI自动化_id 元素定位

## 导包selenium from selenium import webdriver import time1、创建浏览器驱动对象 driver webdriver.Chrome() 2、打开测试网站 driver.get("你公司的平台地址") 3、使浏览器窗口最大化 driver.maximize_window() 4、在用户名输入框中输入admin driver.find_ele…

RSTP环路避免实验(思科)

华为设备参考&#xff1a;RSTP环路避免实验&#xff08;华为&#xff09; 一&#xff0c;技术简介 RSTP (Rapid Spanning Tree Protocol) 是从STP发展而来 • RSTP标准版本为IEEE802.1w • RSTP具备STP的所有功能&#xff0c;可以兼容STP运行 • RSTP和STP有所不同 减少了…

MVC框架里的几种对象

Java语言是一门面向对象的编程语言&#xff0c;所有都用类表达&#xff0c;入口都是一个类&#xff0c;没有独立的main&#xff08;&#xff09;函数&#xff0c;类的实例化就是对象。 简单来讲类包括数据和方法&#xff0c;方法就是操作&#xff0c;是实现业务逻辑的地方&…

天秀洛谷专题 - 素数筛

素数筛 Almost Prime Almost Prime #include<bits/stdc.h> using namespace std;const int N 3000; vector<bool> is_prime(N1, true); vector<int> primes;// 线性筛生成所有小于N的质数 void sieve() {is_prime[0] is_prime[1] false; // 0和1不是质…

数据结构作业整理:扩展字符

题目展示&#xff1a; 【问题描述】 从键盘输入包含扩展符-的字符串&#xff0c;将其扩展为等价的完整字符&#xff0c;例如将a-d扩展为abcd&#xff0c;并输出扩展后的字符串。 要求&#xff1a;只处理[a-z]、[A-Z]、[0-9]范围内的字符扩展&#xff0c;即只有当扩展符前后的字…

5、Jenkins持续集成-Maven和Tomcat的安装与配置

文章目录 一、Maven的安装与配置1、安装maven并配置环境2、全局工具配置关联jdk和maven3、添加Jenkins全局变量4、修改settings.xml文件5、测试是否配置成功二、Tomcat的安装与配置1、安装tomcat8+2、配置Tomcat用户角色权限3、测试是否配置成功一、Maven的安装与配置 在Jenki…