React基础中的单一标签包裹的问题
先上一段代码:
<div id="example">
</div
function HelloMessage(props1) {
return (<h1>Hello {props1.name}!</h1>);
}
const element = <HelloMessage name="maomin"/>;
ReactDOM.render(
element,
document.getElementById('example')
);
页面:
但是如果你想在下面写一段话:“I am your grilfriend!”
是这样写吗?
return (
<h1>Hello {props1.name}!</h1>
<h1>I am your grilfriend!</h1>
);
但是这样出来就会报错:
报错
所以我们这样处理:
return (
<div>
<h1>Hello {props1.name}!</h1>
<h1>I am your grilfriend!</h1>
</div>
);
你还可以使用<React.Fragment>
return (
<<React.Fragment>>
<h1>Hello {props1.name}!</h1>
<h1>I am your grilfriend!</h1>
</<React.Fragment>>
);
更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119882835
React基础中的单一标签包裹的问题的更多相关文章
- react基础用法一(在标签中渲染元素)
react基础用法一(渲染元素) 如图所示最简单的变量使用方法 格式 let 变量名称 = 赋值: 渲染格式直接用 {变量名称} 就可以直接渲染到页面 如图所示第二种渲染方法 格式 const 变量名 ...
- WEB前端html基础中的各类标签介绍
2:html中有很多标签,这里列举十几种标签,有它们的用法及在使用过程中的注意事项!
- react项目中关于img标签的src属性的使用
在一个html文件中,img的src属性赋值为相对路径或绝对路径的字符串即可访问到图片.如下: <img src="../images/photo.png"/> 但在j ...
- Mybatis动态SQL单一基础类型参数用if标签
Mybatis动态SQL单一基础类型参数用if标签时,test中应该用 _parameter,如: 1 2 3 4 5 6 <select id="selectByName" ...
- 去除富文本中的html标签及vue、react、微信小程序中的过滤器
在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容:然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过 1.富文本去除html标签 去除htm ...
- 诡异的小bug 自动生成font标签包裹span标签中的文字
某天测试自己写的网站的时候突然发现页面上一些文字排版出现了一些奇怪的错乱,在控制台发现错乱的文字被font标签包裹着 ,但是代码中根本没用用到font标签 后来发现是因为自己不小心点了谷歌浏览器地址栏 ...
- 36.React基础介绍——2019年12月24日
2019年12月24日16:47:12 2019年10月25日11:24:29 主要介绍react入门知识. 1.jsx语法介绍 1.1 介绍 jsx语法是一种类似于html标签的语法,它的作用相当于 ...
- React Native 系列(九) -- Tab标签组件
前言 本系列是基于React Native版本号0.44.3写的.很多的App都使用了Tab标签组件,例如QQ,微信等等,就是切换不同的选项,显示不同的内容.那么这篇文章将介绍RN中的Tab标签组件. ...
- React官方中文文档【安装】
https://reactjs.org/docs/getting-started.html //React官方文档地址 1.入门 此页面是React文档和相关资源的概述. React是一个用于构建用 ...
随机推荐
- linux权限与系统信息
权限 1.权限分为3个部分 可读(r) 可写(w) 可执行(x) 没有对应权限(-) 2.权限位 权限位主要分为三个部分,分别是属主.属组以及其他人 rwx : 属主 r-x : 属组 r-x : 其 ...
- python入门基础—安装
说明:0基础,那就先练习python语言基础知识,等基础知识牢固了,再对各开发平台分别进行介绍.这里只介绍两个简单而又容易搭建开发平台Anaconda和pycharm Anaconda是一个开源的Py ...
- Markdown练习
这是一级标题 这是二级标题 这是三级标题 这是无序列表1 这是无序列表2 有序1 有序2 重点 计网 1. 第一章 第一部分 1.概念.组成.功能和分类 1. 概念 计算机网络是互连的.自治的计算机的 ...
- Not Adding - 题解【数学,枚举】
题面 原题链接(CF1627D) You have an array \(a_1,a_2,-,a_n\) consisting of \(n\) distinct integers. You are ...
- TCP 连接的建立 & 断开
TCP 连接的建立过程 一开始,客户端和服务端都处于 close 状态. 先是服务端监听某个端口,此时服务端处于 listen 状态. 这个时候客户端就可以发送连接请求报文了. 第一次握手 客户端会主 ...
- come on! 基于LinkedHashMap实现LRU缓存
/** * @Description 基于LinkedHashMap实现一个基于'LRU最近最少使用'算法的缓存,并且最多存MAX个值 * @Author afei * @date:2021/4/25 ...
- [Istio是什么?] 还不知道你就out了,一文40分钟快速理解
@ 目录 前言 Istio是什么? 服务网格是什么? 应用场景 为什么使用Istio? 流量管理介绍 istio架构 Envoy Sidecar Istiod 虚拟服务(VirtualService) ...
- Java学习笔记-基础语法Ⅶ-集合
集合 集合类特点:提供一种存储空间可变的存储模型,存储的数据容量可以随时发生改变 这里需要回顾一下,因为数组和字符串一旦创建,就不可改变,需要区分一下 import java.util.ArrayLi ...
- 操作系统:Tails
Tor是一个网络 如今,Tor浏览器可能是Tor的代言人,但Tor的真正力量在于Tor网络.大家都知道,"Tor"实际上是"The Onion Router"( ...
- 监控工具:nmon
软件介绍 分析工具 分析 AIX 和 Linux 性能的免费工具, 这个高效的工具可以工作于任何哑屏幕.telnet 会话.甚至拨号线路.另外,它并不会消耗大量的 CPU 周期,通常低于百分之二. ...