react自定义组件间的传值,if..else..判断,for循环(嵌套map使用),点击事件(Onclick),页面上事件实事传递参数(基础版)

news/2024/7/27 12:11:53/文章来源:https://blog.csdn.net/ZerZhang/article/details/135554368

9.自定义组件间的传值

    //引入全局参数import imageUrl from '../../images/winter.jpg';//自定义图片参数方法const user = {name: 'Hedy Lamarr',imageSize: 90,};//写入图片方法function Image() {return (<div><p>{user.name}</p><img src={imageUrl} alt={'Photo of ' + user.name}style={{width: user.imageSize,height: user.imageSize}}/></div>)}//页面自定义组件上的名称function MyButton() {return (<button>I'm a button</button>);}export default class Fourzerofour extends Component {render() {return (<div>//书写到页面的样式<MyButton/>//引入图片<Image/></div>)}}

10.if..else..判断

    var concat = {data:1}//if..else..判断function Ifelse(){if(concat.data<0){concat.data = concat.data+1}else{concat.data = concat.data-1}return(<div>{concat.data}</div>)}或者--------------------function Ifelse(){return(<div>{concat.data>0?concat.data = concat.data+1:concat.data = concat.data-1}</div>)}

11.for循环(嵌套map使用)

 var arr = [{ title: 'Cabbage', id: 1, isfine:1 },{ title: 'Garlic', id: 2, isfine:0 },{ title: 'Apple', id: 3, isfine:1 }];function For(){return(<div>{arr.map((item,index)=>{return(<div key={index} style={{color:item.isfine == 1?'red':'green'}}>{item.id}{item.title}</div>)})}</div>)}

12.点击事件(Onclick)

    function MyButton() {function ClickButton() {alert('Button clicked!');}return (<button onClick={ClickButton}>I'm a button</button>);}

13.页面上事件实事传递参数

   //先引入方法import { useState } from 'react';function Transmit(){//      事件    方法     const [count, setCount] = useState(0);function handleClick() {setCount(count + 1);}return(<button onClick={handleClick}>你点击了我{count}次</button>)} 

14.关于export default function App()与export function App()的区别

   export default不需要{}      import  Gallery from './Gallery.js';

   export function需要{}       import {Gallery} from './Gallery.js';

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

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

相关文章

Android studio RecyclerView 应用设计

一、创建empty activity项目: 二、打开activity_main.xml布局文件: 添加RecyclerView控件 <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/…

浅谈对Maven的理解

一、什么是Maven Maven——是Java社区事实标准的项目管理工具&#xff0c;能帮你从琐碎的手工劳动中解脱出来&#xff0c;帮你规范整个组织的构建系统。不仅如此&#xff0c;它还有依赖管理、自动生成项目站点等特性&#xff0c;已经有无数的开源项目使用它来构建项目并促进团队…

【LabVIEW FPGA 编程入门】使用FPGA IO进行编程

1.在项目中新建一个VI&#xff0c;命名为FPGA IO Test。 2. 可以直接将项目中的FPGA IO拖入程序框图中。 FPGA IO的类型&#xff1a; 数字线&#xff1a; 数字端口&#xff1a; 模拟IO&#xff1a; 其他&#xff1a; 3.如果新增加了FPGA资源&#xff0c;不是创建项目时扫描到的…

C++算法学习心得五.二叉树(3)

1.合并二叉树&#xff08;617题&#xff09; 题目要求&#xff1a; 给定两个二叉树&#xff0c;想象当你将它们中的一个覆盖到另一个上时&#xff0c;两个二叉树的一些节点便会重叠。 你需要将他们合并为一个新的二叉树。合并的规则是如果两个节点重叠&#xff0c;那么将他们…

用Python做一个2048小游戏

文章目录 逻辑设计绘图逻辑主循环 逻辑设计 2048的逻辑无非是操作 4 4 4\times4 44的方格&#xff0c;每个方格中有一个数&#xff0c;这些数可以移动&#xff0c;如果两个相同的数字在移动时相撞了&#xff0c;就可以彼此合并。 而这个 4 4 4\times4 44的方格&#xff0c;…

Jenkins自动化部署docker

Jenkins自动化部署docker和普通方式构建 docker外挂目录 准备测试服务器docker环境准备jdk环境将上传jar包修改为app.jar对外暴露1000端口启动jar FROM openjdk:8-jdk-alpine ARG JAR_FILE COPY ${JAR_FILE} app.jar EXPOSE 1000 ENTRYPOINT ["java","-jar&q…

搭建知识付费小程序平台:如何避免被坑,选择最佳方案?

随着知识经济的兴起&#xff0c;知识付费已经成为一种趋势。越来越多的人开始将自己的知识和技能进行变现&#xff0c;而知识付费小程序平台则成为了一个重要的渠道。然而&#xff0c;市面上的知识付费小程序平台琳琅满目&#xff0c;其中不乏一些不良平台&#xff0c;让老实人…

(学习日记)2024.01.09

写在前面&#xff1a; 由于时间的不足与学习的碎片化&#xff0c;写博客变得有些奢侈。 但是对于记录学习&#xff08;忘了以后能快速复习&#xff09;的渴望一天天变得强烈。 既然如此 不如以天为单位&#xff0c;以时间为顺序&#xff0c;仅仅将博客当做一个知识学习的目录&a…

CSS 下载进度条

<template><view class=btn>下载中</view></template><script></script><style>/* 设置整个页面的样式 */body {width: 100vw; /* 页面宽度为视口宽度 */background: #000000; /* 背景颜色为白色 */display: flex; /* 使用 flex…

领导看了就给我升职加薪的年终总结,我只花5分钟就写完了!

年末正是做总结的时候&#xff0c;如果你正苦于年终总结不知道该如何下手&#xff0c;ProcessOn刚好上线了AI一键帮你生成年终总结的活动&#xff0c;还可以下载成PPT格式&#xff0c;或许可以助你一臂之力&#xff0c;操作起来十分简单。当然&#xff0c;计划也可以一键生成&a…

Linux 内核大转变:是否将迈入现代 C++ 的时代?

Linux开发者 H. Peter Anvin 在邮件列表中重启了关于 Linux内核C代码转换为C的讨论&#xff0c;并陈述了自己的观点。说之前先看一下这个话题的历史背景。 早在2018年4月1日&#xff0c;Andrew Pinski提议将 Linux 内核源码转为 C&#xff0c;在文中写道之所以引入是由于以下优…

2023 年公链发展报告

作者&#xff1a;stellafootprint.network 2023 年&#xff0c;公链领域展现出强大的韧性和持续的创新力。这一年&#xff0c;比特币的强势回归、以太坊的稳步增长以及 Solana 的惊人崛起&#xff0c;共同绘制出一幅市场复苏的生动画面。在这一背景下&#xff0c;公链加密货币…

Springboot + websocket 实现 一对一 单人聊天

Springboot websocket 实现 一对一 单人聊天 要使用websocket ,需要添加 jar 打开项目中的pom.xml,添加以下内容 创建java端代码 配置websocke的endpoints 配置websocket的server ServerEndpoint(value "/websocket/{username}") 这句话 一定要注意, 这里 路…

计算机毕业设计 基于Java的国产动漫网站的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

使用swift创建第一个ios程序

一、安装xcode 先到app store中下载一个Xcode app 二、创建项目 1、项目设定 创建ios app 2、工程结构 三、修改代码实现按键联动 四、运行测试

Arduino快速上手esp32方案开发

一、什么是ESP32&#xff1f; ESP32是Espressif Systems推出的一款高性能、低功耗的Wi-Fi和蓝牙双模系统级芯片&#xff08;SoC&#xff09;&#xff0c;广泛应用于物联网、智能家居、可穿戴设备等领域。它基于极低功耗的Tensilica Xtensa LX6微处理器&#xff0c;并集成了丰富…

云计算概述(发展过程、定义、发展阶段、云计算榜单)(一)

云计算概述&#xff08;一&#xff09; &#xff08;发展过程、定义、发展阶段、云计算榜单&#xff09; 本文目录&#xff1a; 零、00时光宝盒 一、前言 二、云计算的发展过程 三、云计算的定义 四、云计算发展阶段 五、云计算公司榜单看云计算兴衰 六、参考资料 零、0…

C++ 设计模式之组合模式

【声明】本题目来源于卡码网&#xff08;题目页面 (kamacoder.com)&#xff09; 【提示&#xff1a;如果不想看文字介绍&#xff0c;可以直接跳转到C编码部分】 【简介】什么是组合模式 组合模式是⼀种结构型设计模式&#xff0c;它将对象组合成树状结构来表示“部分-整体”的…

自动化神器 Playwright 的 Web 自动化测试解决方案

1. 主流框架的认识 总结&#xff1a; 由于Selenium在3.x和4.x两个版本的迭代中并没有发生多大的变化&#xff0c;因此Selenium一统天下的地位可能因新框架的出现而变得不那么稳固。后续的Cypress、TestCafe、Puppeteer被誉为后Selenium时代Web UI自动化的三驾马车。但是由于这三…

ES数据聚合

1.数据聚合 聚合&#xff08;aggregations&#xff09;可以让我们极其方便的实现对数据的统计、分析、运算。例如&#xff1a; 什么品牌的手机最受欢迎&#xff1f; 这些手机的平均价格、最高价格、最低价格&#xff1f; 这些手机每月的销售情况如何&#xff1f; 实现这些…