React入门 - 04(从编写一个简单的 TodoList 说起)

继上一节我们已经对 React组件和 ”JSX语法“有了大概的了解,这一节我们继续在 react-demo这个工程里编写代码。这一节我们来简单实现一个 TodoList来更加了解编写组件的一些细节。

1、在编辑器中打开 react-demo这个工程

2、打开 index.js文件,将组件 App改为 TodoList,挂载的地方同样进行此修改。

import React from 'react';
import ReactDOM from 'react-dom/client'; 
import reportWebVitals from './reportWebVitals';import TodoList from './TodoList'; const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><TodoList /></React.StrictMode>
);reportWebVitals(); 

3、在src文件下新建 TodoList.js文件,内容编写如下

import React, { Component } from "react";class TodoList extends Component{render() {return (<div>todolist 内容</div>)}
}export default TodoList

4、运行下工程,可以看到网页的内容如下
在这里插入图片描述

5、我们继续实现 TodoList功能:界面有一个输入框和一个提交按钮,在输入框里输入内容,点击”提交“按钮后,内容就会以列表的形式展示在界面 input框下面。

6、根据功能要求,我们继续编写 TodoList组件代码

import React, { Component } from "react";class TodoList extends Component{render() {return (<div><input /><button> 提交 </button></div><ul><li>React 入门-01</li><li>React 入门-02</li><li>React 入门-03</li></ul>)}
}export default TodoList

7、运行代码时报错如图。
在这里插入图片描述

8、为什么报错呢?答案:因为”JSX语法“要求我们在写 HTML标签时,最外层有且只能有一个 <div>标签来对所有标签进行包裹。所以将代码改正一下

import React, { Component } from "react";class TodoList extends Component{render() {return (// 外层有且只能有一个 div 标签对所有标签进行包裹!<div><div><input /><button> 提交 </button></div><ul><li>React 入门-01</li><li>React 入门-02</li><li>React 入门-03</li></ul></div>)}
}export default TodoList

9、关于”JSX“外层有且只能有一个 <div>包裹。细心的你们一定会发现这个 <div>会实实在在的显示在了 DOM 结构上,但有的时候我们并不希望有这个多余的节点出现,这个又怎么进行解决呢?
在这里插入图片描述

10、在 React 16版本里,React提供了一个名为 Fragment的占位符来解决这个问题。也就是说,我们可以从 react中引入这个 Fragment,然后使用 <Fragment>来 代替最外层的 <div>元素

// 引入 Fragment
import React, { Component, Fragment } from "react";class TodoList extends Component{render() {return (// 使用 Fragment 代替 div<Fragment><div><input /><button> 提交 </button></div><ul><li>React 入门-01</li><li>React 入门-02</li><li>React 入门-03</li></ul></Fragment>)}
}export default TodoList

11、再次观察 DOM 结构,就会发现顶级 <div>的问题就解决了
在这里插入图片描述

到此,本章的内容就结束了!

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

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

相关文章

Spark---RDD(Key-Value类型转换算子)

文章目录 1.RDD Key-Value类型1.1 partitionBy1.2 reduceByKey1.3 groupByKeyreduceByKey和groupByKey的区别分区间和分区内 1.4 aggregateByKey获取相同key的value的平均值 1.5 foldByKey1.6 combineByKey1.7 sortByKey1.8 join1.9 leftOuterJoin1.10 cogroup 1.RDD Key-Value…

C //练习 4-4 在栈操作中添加几个命令,分别用在不弹出元素的情况下打印栈顶元素;复制栈顶元素;交换栈顶两个元素的值。另外增加一个命令用于清空栈。

C程序设计语言 &#xff08;第二版&#xff09; 练习 4-4 练习 4-4 在栈操作中添加几个命令&#xff0c;分别用在不弹出元素的情况下打印栈顶元素&#xff1b;复制栈顶元素&#xff1b;交换栈顶两个元素的值。另外增加一个命令用于清空栈。 注意&#xff1a;代码在win32控制台…

鸿蒙南向开发—PWM背光(OpenHarmony技术)

背光驱动模型也是基于HDF框架开发的&#xff0c;整个框架如下&#xff1a; 现在以RK3568为例&#xff0c;来看看PWM背光整个驱动&#xff0c;这里使用的是PWM占空比控制的背光&#xff0c;默认基于hdf的pwm驱动已经OK&#xff01; 需要注意的是&#xff1a;这里是基于HDF实现的…

Python有优点有哪些 为什么近些年使用的人越来越多

Python是一种广泛使用的高级编程语言&#xff0c;以其简洁、易读和强大的功能而著称。近年来&#xff0c;Python使用人数不断增加。 Python有以下优点&#xff1a; 语法简洁 Python的语法简洁易懂&#xff0c;使得编写代码变得容易和高效。 跨平台 Python支持多种操作系统…

安卓Android Studioy读写NXP ICODE2 15693标签源码

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?spma1z10.5-c-s.w4002-21818769070.11.4391789eCLwm3t&id615391857885 <?xml version"1.0" encoding"utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xm…

低轨卫星最低轨道高度及发展意义

一、天与空的区别 “空”指的是地球表面到大气层之内的高度范围&#xff0c;通过气球、飞机、飞艇等航空器可达&#xff1b;而大气层之外的空间&#xff0c;才可以称之为“天”&#xff0c;一般需要通过火箭才可到达。 1960年第53届巴塞罗那国际航空联合大会决议规定&#xf…

mysql列题

mysql列题 1.查询学过「张三」老师授课的同学的信息2.查询没有学全所有课程的同学的信息3.查询没学过"张三"老师讲授的任一门课程的学生姓名4.查询两门及其以上不及格课程的同学的学号&#xff0c;姓名及其平均成绩5.检索" 01 "课程分数小于 60&#xff0c…

阿里云 WindowsServer 使用之 配置 SQL Server 允许远程连接

阿里云 WindowsServer 使用之 配置 SQL Server 允许远程连接 第一步&#xff1a;安装 SQL Server 数据库 这是一个很详细的安装教程&#xff0c;可以参考一下 安装SQL Server详细教程 需要注意&#xff1a;安装实例时&#xff0c;建议在‘身份验证模式’直接选择“混合模式”…

编码技巧(二) element-ui table中根据状态控制是否可以勾选

项目中使用element-ui时,表格中的数据有不同的状态,需要对某个状态的数据进行 勾选操作 如图所示: 只有id为12的符合条件可以进行勾选 <el-table-column type="selection" header-align="center" :selectable="selectable" align="c…

Maven 基础总结篇

Maven 基础总结篇 Maven是专门用于管理和构建Java项目的工具&#xff0c;它的主要功能有&#xff1a; 提供了一套标准化的项目结构&#xff1a;用于解决不同IDE&#xff08;例如eclipse与IDEA&#xff09;不同的项目结构的问题 提供了一套标准化的构建流程&#xff08;编译&…

C++经典程序(2)

要读取报文内容&#xff0c;你可以使用C语言的socket编程库来读取报文。下面是一个简单的示例代码&#xff0c;演示了如何使用C语言读取HTTP报文内容&#xff1a; #include <stdio.h> #include <stdlib.h> #include <string.h> #include <sys/socket.h&g…

Redis底层原理

持久化 Redis虽然是个内存数据库,但是Redis支持RDB和AOF两种持久化机制,将数据写往磁盘,可以有效地避免因进程退出造成的数据丢失问题,当下次重启时利用之前持久化的文件即可实现数据恢复。 RDB RDB持久化是把当前进程数据生成快照保存到硬盘的过程。所谓内存快照,就是…

Python修改二值图像某特定颜色

#改变图片像素值164-1&#xff1b;255-2&#xff1b; from PIL import Image import cv2 import os # img cv2.imread("F:/AI/glaucoma_set/gla_img_120_Chall/Annotation-Training400/Disc_Cup_Fovea_Illustration/g0001.jpg") # img cv2.imread("F:/AI/glau…

网络爬虫中的代理IP应用与高效管理策略探析

在网络爬虫技术日益普及的今天&#xff0c;面对目标网站对访问频率、IP地址等的严格限制&#xff0c;如何合理、有效地利用和管理代理IP资源成为了一项至关重要的任务。本文将深入探讨代理IP在爬虫项目中的应用&#xff0c;并提出一套科学高效的管理策略。 一、代理IP在网络爬…

47.解释一下Spring AOP里面的几个名词

解释一下Spring AOP里面的几个名词 切面(Aspect): 在Spring Aop指定就是“切面类” ,切面类会管理着切点、通知。连接点(Join point): 指定就是被增强的业务方法通知(Advice): 就是需要增加到业务方法中的公共代码, 通知有很多种类型分别可以在需要增加的业务方法 不…

分布式I/O应用于智慧停车场的方案介绍

客户案例背景 目前车位检测技术有磁电技术、超声波技术、红外线技术、图像识别车位技术。考虑到例如电磁干扰、信号干扰等的环境因素影响&#xff0c;通常会采用组合使用的方式进行&#xff0c;如采用不同的传感器、应用不同的协议等&#xff0c;以便提高车位检测的准确性和实时…

xilinix 7系列器件生成已加密文件和已经过身份验证的文件

注释 &#xff1a;如需了解更多信息&#xff0c;请参阅《使用加密确保 7 系列 FPGA 比特流的安全》(XAPP1239)。 要生成加密比特流&#xff0c;请在 Vivado IDE 中打开已实现的设计。在主工具栏中&#xff0c;依次选择“Flow” → “Bitstream Settings”&#xff08;流程 >…

Go语言学习笔记(二)

Go语言的学习资源 以下是一些推荐的Go语言学习资源的链接&#xff1a; Go语言教程&#xff1a;https://golang.org/doc/Go by Example&#xff1a;Go by ExampleGolang Tutorials&#xff1a;https://golangtutorials.com/Go语言第一课&#xff08;慕课网&#xff09;&#x…

每周三提前预知:绝地求生27.2版本最早1月10日上线,交易所系统、召唤掩体等新功能上线

嗨&#xff0c;我是闲游盒 27.2新版本预计最早1月10日上线&#xff0c;届时会停机更新约9小时&#xff0c;大家注意合理安排游戏时间! 这次更新带来了很多荣都地图的新玩法&#xff0c;主打的交易所系统即将上线! PUBG官方已经发布了预告 交易所系统 而这次的交易所系统玩法…

Java利用Apache compress包实现文件夹压缩成Zip包

Apache common提供了很多实用的工具包&#xff0c;下面就说一下如何用compress包来压缩文件夹。先引入compress&#xff0c;io和lang3这3个工具包&#xff1a; <dependencies><dependency><groupId>org.apache.commons</groupId><artifactId>com…