使用React.Fragment替代render函数中div的包裹
1、在 React 中,render 函数中 return 的内容只能有一个根节点,如果多个元素嵌套,需要用一个标签元素包裹
这个包裹的标签通常用 div,示例如下:
class App extends Component {
render() {
return (
<div>
<h1>大标题</h1>
<h2>小标题</h2>
</div>
);
}
}
此时 #root 下的结构:
2、如果不加 div,会报错
示例如下:
class App extends Component {
render() {
return (
<h1>大标题</h1>
<h2>小标题</h2>
);
}
}
3、不加 div 的解决办法:用 React.Fragment 替代
示例如下:
class App extends Component {
render() {
return (
<React.Fragment>
<h1>大标题</h1>
<h2>小标题</h2>
</React.Fragment>
);
}
}
此时 #root 下的结构就不会多出一个“烦人”的 div 啦
使用React.Fragment替代render函数中div的包裹的更多相关文章
- React.Fragment 的作用:代替div作为外层
https://segmentfault.com/a/1190000013220508 import React, { Fragment } from 'react'; <Fragment> ...
- vue 2.0 scopedSlots和slots在render函数中的应用示例
渲染内容为: hello from functional render scopedSlots render scopedSlots named slot of render hello from f ...
- vue入门:(底层渲染实现render函数、实例生命周期)
vue实例渲染的底层实现 vue实例生命周期 一.vue实例渲染的底层实现 1.1实例挂载 在vue中实例挂载有两种方法:第一种在实例化vue时以el属性实现,第二种是通过vue.$mount()方法 ...
- Render函数详解
一.虚拟dom DOM是文档对象模型(Document Object Model)的简写,在浏览器中通过js来操作DOM的操作性能很差,于是虚拟Dom应运而生.虚拟Dom就是在js中模拟DOM对象树来 ...
- Vue学习笔记进阶篇——Render函数
基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template ...
- vue render函数
基础 vue推荐在绝大多数情况下使用template来创建你的html.然而在一些场景中,你真的需要javascript的完全编程能力.这就是render函数.它比template更接近编译器 < ...
- VUE3 之 render 函数的使用 - 这个系列的教程通俗易懂,适合新手
1. 概述 老话说的好:不用想的太多.太远,做好当天的事,知道明天要做什么就可以了. 言归正传,今天我们来聊聊 VUE 中 render 函数的使用. 2. render 函数 2.1 一个简单的例子 ...
- react中 props,state与render函数的关系
我们很明显的能够感受到,react是一门数据驱动的框架,当数据发生变化,页面就会自动发生变化,他背后的原理是怎么样子的呢 比如todolist例子里面,inputValue变了,框里面的内容就会自动变 ...
- react中 props,state,render函数的关系
1.当组件的 state 或者 props 发生改变的时候,自己的render函数就会重新执行. 2. 当父组件的render函数执行时,其所有子组件的render函数都会重新执行.
随机推荐
- js时间的一些处理
1.判断是否为同一天 function isSameFay(t) { return new Date(t).toDateString() === new Date().toDateString(); ...
- 用ArcMap在PostgreSQL中创建要素类需要执行”create enterprise geodatabase”吗
问:用Acmap在PostgreSQL中创建要素类需要执行"create enterprise geodatabase"吗? 关于这个问题,是在为新员工做postgresql培训后 ...
- iOS @功能的部分实现思路
需求描述 1. 发布信息时,通过键盘键入@符号,或者点选相关功能键,唤醒@列表,进行选择 2.选择结束后,输入栏改色显示相关内容 3.删除时,整体删除@区块,且不能让光标落在@区块之间 实现步骤 1. ...
- python实践项目七:正则表达式版本的strip()函数
描述:写一个函数,它接受一个字符串,做的事情和 strip()字符串方法一样.如果只传入了要去除的字符串, 没有其他参数, 那么就从该字符串首尾去除空白字符:否则, 函数第二个参数指定的字符将从该字符 ...
- 小程序重置index,重置item
重置index,重置item <block wx:for="{{index_data.banner_list}}" wx:for-index="idx" ...
- ubuntu16.04+cuda9.0_cudnn7.5+tensorflow-gpu==1.12.0
1.查找可用的tensorflow源,该命令运行后终端会输出所有可用的源 anaconda search -t conda tensorflow 2.这里name是上一步中输出源的tensorflow ...
- web动静分离
1 动态资源和静态资源 动态资源:多次访问页面,原代码会发生改变,比如jsp 静态资源:多次访问页面,原代码不发生改变,比如html,css 2 动静分离 将动态资源(jsp)放在tomcat服务器中 ...
- react-native-typescript-项目环境搭建
1.yarn global add create-react-native-app //全局安装 2.create-react-native-app 项目名称 3.yarn add typescrip ...
- 在iis中部署网站出现的错误
第一次错误: 解决的方案:点击网站新建一个同名的应用池,选择网站的基本设置,选中同名的应用池 接下来可能会有第二个错误 错误摘要HTTP 错误 500.21 - Internal Server Err ...
- java笔记3
面向对象的特点: 1.封装: 2.继承 3.多态 好处: 是一种符合人们思考习惯的思想 可以将复杂的事情简单化 将程序员从执行者变为指挥者 二 类与对象 成员变量与局部变量的区别: ...