React中Fragment标签和空标签的使用(vue中的template标签类似)

Fragment作用：
类似于vue中的template标签，将当前dom不渲染后页面。在多层循环中可以添加key属性，其他属性不可以添加。不然会警告，提示只能有key属性和children vdom

使用：

import React,{Fragment} from 'react'
import { Button } from 'antd'export default function Key(){let myRef = React.useRef()const alertFun = ()=>{alert(myRef.current.value)}return (<Fragment><input type="test" ref={myRef}/><Button onClick={alertFun}>展示input的值</Button>Fragment</Fragment>)
}

react和vue的特性就是组件的只能有一个根元素，为了解决这个问题我们可以在vue中使用template标签，在react中使用Fragment标签，包裹在组件的跟标签上。

空标签：
在react中也可以这样写，但是前提是不循环，唯一，因为这样写连key属性都写不上。

import React from 'react'
import { Button } from 'antd'export default function Key(){let myRef = React.useRef()const alertFun = ()=>{alert(myRef.current.value)}return (<><input type="test" ref={myRef}/><Button onClick={alertFun}>展示input的值</Button>Fragment</>)
}

React中Fragment标签和空标签的使用(vue中的template标签类似)相关推荐

vue 给标签添加data属性_在Vue中获取自定义属性方法:data-id的实例
获取自定义属性的方法: 第一步:首先在标签上绑定上@click="getDateId(item.id)",并将属性值传到绑定的事件里面第二步:在标签上继续绑定:date-id = ...
android中fragment如何保存edittext文本,如何在Android中使用DialogFragment进行文本输入？...
我想获得一个值,用户输入到一个对话框,使用建议的DialogFragment类为它,对话框构造和运行良好,但我不能返回EditText参数的值父类,没有得到一个空值指针异常.如何在Android中使用 ...
vue 中provide的用法_说一说VUE中的/deep/用法
七夕了,写个昨天遇到的bug来缓解下没有人约的尴尬. 昨天和QA过历史bug时,发现有好几个浏览器不兼容的导致式样变形的bug,调查了一番发现是因为deep选择器的原因. 在说bug之前,先看看vue ...
vue 中provide的用法_[转]浅谈vue中provide和inject 用法
provide:Object | () => Object inject:Array | { [key: string]: string | Symbol | Object } provide ...
18 v-for中使用v-if结合template标签的使用
[基础]v-for列表循环详细讲解-2 v-for循环数字 v-for中如何使用判断 template 标签的使用 v-for循环数字 v-for是可以用来循环数字的,比如你要循环1-99的数字,可以 ...
关于template标签用法总结(含vue中的用法总结)
文章目录一.html5中的template标签二.template标签操作的属性和方法三.vue中的template 1.template标签在vue实例绑定的元素内部 2.vue实例中的tem ...
vue template html属性,详解template标签用法(含vue中的用法总结)
一.html5中的template标签 html中的template标签中的内容在页面中不会显示.但是在后台查看页面DOM结构存在template标签.这是因为template标签天生不可见,它设置了 ...
安卓中fragment的使用全解
全栈工程师开发手册 (作者:栾鹏) 安卓教程全解安卓中Fragment可以没有UI,不需要manifest中注册,只能嵌套在一个activity存在. 在Fragment基础上,系统派生处理另外几种 ...
vue与微信开放标签，调起app
使用微信开放标签 <wx-open-launch-app></wx-open-launch-app>调起分享到微信网页中的app 此开放标签只能在线上显示,本地与测试环境均不显 ...
Vue进阶（幺肆玖）：template 标签
文章目录一.HTML5 中的 template 标签二.Vue 中的 template 标签三.注意事项四.拓展阅读一.HTML5 中的 template 标签 html5中template ...

React中Fragment标签和空标签的使用(vue中的template标签类似)

React中Fragment标签和空标签的使用(vue中的template标签类似)相关推荐

最新文章

热门文章