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是一个用于构建用 ...
随机推荐
- mybatis在if标签里判断字符串相等
https://www.cnblogs.com/westward/p/6910856.html
- NodeJs学习日报day7——简单中间件
const express = require('express') const app = express() const mw = function(req, resp, next) { cons ...
- 数仓建设 | ODS、DWD、DWM等理论实战(好文收藏)
本文目录: 一.数据流向 二.应用示例 三.何为数仓DW 四.为何要分层 五.数据分层 六.数据集市 七.问题总结 导读 数仓在建设过程中,对数据的组织管理上,不仅要根据业务进行纵向的主题域划分,还需 ...
- PDCA循环——快速提升软件质量的必备工具
近年来,软件项目的规模及其复杂性正在以空前的速度增长,互联网用户市场庞大,互联网公司和相应的软件产品层出不穷.快速响应需求变化往往是互联网行业的常态,软件产品的快速开发迭代对于公司迅速占领市场.抢占商 ...
- CentOS 8迁移Rocky Linux 8手记
前言 由于CentOS 8的支持已经到期了,.NET 6也不支持了,然后也无法升级,导致使用起来已经非常不便,无奈只有迁移服务器这个选项了. 选择发行版本一直是一个比较头疼的问题,首先我不是专门运维的 ...
- ONNXRuntime学习笔记(二)
继上一篇计划的实践项目,这篇记录我训练模型相关的工作. 首先要确定总体目标:训练一个pytorch模型,CIFAR-100数据集测试集acc达到90%:部署后推理效率达到50ms/张, 部署平台为wi ...
- 一些特殊的CSS属性
1.<form>标签的enctype属性 enctype属性规定在发送到服务器之前应该如何对表单数据进行编码,属性值如下: application/x-www-form-urlencode ...
- KD-Tree及希尔伯特空间填充曲线的应用
引言 我们可能会有这样的一种需求,像是打车软件中呼叫附近的车来接送自己,或者是在qq中查看附近的人.我们都需要知道距离自己一定范围内的其它目标的集合.如果将上面举例的功能抽象出来,就是要实现以某个点为 ...
- HamsterBear Linux Low Res ADC按键驱动的适配 + LVGL button移植
HamsterBear lradc按键驱动的适配 平台 - F1C200s Linux版本 - 5.17.2 ADC按键 - 4 KEY tablet 驱动程序位于主线内核: drivers/inpu ...
- Unity-Adressable打包热更
Addressable是Unity推出的打ab包方案,自动依赖: 不需要手动写AB打包方案,不需要关心依赖; 提供本地远程服务异步加载: 打包粒度可调节: 1.Group Addressable打包需 ...