React中Fragment标签和空标签的使用

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
        </>
    )
}