iis服务器助手广告广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >React里的Fragment标签的具体使用
  • 595

0
分享到

React里的Fragment标签的具体使用

React Fragment标签React FragmentReact.Fragment 2023-01-31 12:01:55 595人浏览 安东尼
摘要

目录<></>包裹多个元素↓： 使用Fragment标签↓：<></>和Fragment标签的区别Rea

React return里返回多个元素值要有父标签包裹。

React.Fragment组件能够在不额外创建 DOM 元素的情况下，让 render()方法中返回多个元素。相当于空标签<></>。

<></>包裹多个元素↓：

import React, { Component, Fragment } from "react";
import "./App.CSS";
 
class App extends Component {
  render() {
    return (
      <>
        <div>
          <input />
          <button>按钮</button>
        </div>
        <ul>
          <li>哈</li>
          <li>咯</li>
        </ul>
      </>
    );
  }
}
 
export default App;

 使用Fragment标签↓：

和<></>实现效果一致。

import React, { Component, Fragment } from "react";
import "./App.css";
 
class App extends Component {
  render() {
    return (
      <Fragment>
        <div>
          <input />
          <button>按钮</button>
        </div>
        <ul>
          <li>哈</li>
          <li>咯</li>
        </ul>
      </Fragment>
    );
  }
}
 
export default App;

 <React.Fragment>就不用在头部引入了↓：

import React, { Component } from "react";
import "./App.css";
 
class App extends Component {
  render() {
    return (
      <React.Fragment>
        <div>
          <input />
          <button>按钮</button>
        </div>
        <ul>
          <li>哈</li>
          <li>咯</li>
        </ul>
      </React.Fragment>
    );
  }
}
 
export default App;

 使用<div>包裹多个标签就会多一层嵌套↓：

import React, { Component, Fragment } from "react";
import "./App.css";
 
class App extends Component {
  render() {
    return (
      <div>
        <div>
          <input />
          <button>按钮</button>
        </div>
        <ul>
          <li>哈</li>
          <li>咯</li>
        </ul>
      </div>
    );
  }
}
 
export default App;

<></>和Fragment标签的区别

Fragment标签支持能接受键值或属性，可以遍历循环渲染元素

import React, { Component } from "react";
import "./App.css";
 
const list = [
  { id: 0, name: "凤凰火", description: "最肉" },
  { id: 1, name: "彼岸花", description: "花花" },
];
class App extends Component {
  render() {
    return list.map((item) => (
      <React.Fragment key={item.id}>
        <li>
          {item.name}是{item.description}
        </li>
      </React.Fragment>
    ));
  }
}
 
export default App;

到此这篇关于React里的Fragment标签的具体使用的文章就介绍到这了,更多相关React Fragment标签内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: React里的Fragment标签的具体使用

本文链接: https://www.lsjlt.com/news/191781.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • React里的Fragment标签的具体使用
    目录<></>包裹多个元素↓： 使用Fragment标签↓：<></>和Fragment标签的区别rea...
    99+
    2023-01-31
    React Fragment标签 React Fragment React.Fragment
  • Mybatis的xml中使用if/else标签的具体使用
    目录使用if标签进行查询where标签出场if/else 使用 choose，when，otherwise 代替使用if标签进行查询 SELECT ord...
    99+
    2024-04-02
  • React中useRef的具体使用
    相信有过React使用经验的人对ref都会熟悉，它可以用来获取组件实例对象或者是DOM对象。 而useRef这个hooks函数，除了传统的用法之外，它还可以“跨渲染周期”保存数据。 ...
    99+
    2024-04-02
  • Android入门教程之Fragment的具体使用详解
    目录Fragment 的简单用法动态加载 FragmentFragment 实现返回栈Fragment 和 Activity 之间的交互Fragment 生命周期Fragment 的...
    99+
    2024-04-02
  • 详解React中Fragment的简单使用
    目录react 中的 Fragment标签渲染Fragment 标签Fragment 标签和 <></> 区别react 中的 ...
    99+
    2022-11-13
    React Fragment使用 React Fragment
  • React自定义Hook-useForkRef的具体使用
    目录开篇思路实现自定义 Hook - useForkRef开篇 使用过 React 技术栈的同学相信都使用过 ref 传递给 render 中的元素，而在使用 React 封装组件时...
    99+
    2024-04-02
  • HTML 图像标签：提升用户体验的魔法工具
    增强视觉吸引力 图像为您的网页增添视觉趣味，打破文本的单调性，吸引用户的注意力。精心挑选的高质量图像可以增强品牌形象、传达信息并营造特定氛围。此外，动画图像（如GIF）或视频可以进一步吸引用户，提高网站的动态性。 改善内容理解 图像可以补...
    99+
    2024-04-02
  • HTML5新增的多媒体标签怎么使用
    这篇“HTML5新增的多媒体标签怎么使用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“HT...
    99+
    2024-04-02
  • Quartz.NET的具体使用
    目录一、什么是Quartz.NET？二、Quartz.NET可以做什么？三、ASP.NET Core如何使用Quartz.NET？四、Quartz的cron表达式一、什么是Quart...
    99+
    2024-04-02
  • JavaScheduledExecutorService的具体使用
    目录1. 延迟不循环任务schedule方法2. 延迟且循环cheduleAtFixedRate方法3. 严格按照一定时间间隔执行``ScheduledExecutorService...
    99+
    2023-05-19
    ScheduledExecutorService
  • QtQFrame的具体使用
    目录1.概述2.常用数据接口3.示例1.概述 void setFrameShape(Shape) QFrame继承QWidget，QFrame类是具有框架的小部件的基类，例如QLab...
    99+
    2024-04-02
  • python__add__()的具体使用
    __add__(),  同一个类，两个对象相加的实现逻辑，重写 + class Myclass(object): def __init__(self,value):...
    99+
    2023-02-27
    python __add__()使用 python __add__
  • pythonhttpx的具体使用
    目录什么是 Httpx安装 Httpx发送 HTTP 请求发送异步 HTTP 请求设置请求标头设置请求参数发送请求体发送 JSON 数据设置超时错误处理证书验证使用代理上传文件使用 ...
    99+
    2023-05-14
    python httpx
  • np.unique()的具体使用
    目录一、np.unique() 介绍二、np.unique() 原型三、实例参考链接一、np.unique() 介绍 对于一维数组或者列表，np.unique() 函数 去除其中重复...
    99+
    2023-03-14
    np.unique()使用 np.unique()
  • resultMap标签中里的collection标签详解
    目录resultMap标签中的collection标签collection(一对多)collection标签中各属性的说明resultMap标签中的collection标签 coll...
    99+
    2024-04-02
  • html的B标签和Strong标签怎么使用
    本篇内容介绍了“html的B标签和Strong标签怎么使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！一...
    99+
    2024-04-02
  • mybatis的＜choose＞标签使用
    记录：418 场景：使用MyBatis的标签的标签的test属性，对入参属性的值做非null(!=null)、非空(!='')判断，或者与常量做相等(==)或者不等判断(!=)。 版本：JDK 1.8,Spring Boot 2.6.3,m...
    99+
    2023-09-22
    mybatis choose标签使用 Java ORM框架
  • HTML5的audio标签和video标签怎么使用
    这篇文章主要介绍了HTML5的audio标签和video标签怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇HTML5的audio标签和video标签怎么使用文章都会有所...
    99+
    2024-04-02
  • DreamWeaver中p标签br标签的使用方法
    小编给大家分享一下DreamWeaver中p标签br标签的使用方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！DreamWeaver中输入的文字，想要换换，我们...
    99+
    2023-06-08
  • css怎么改变a标签里的字体颜色
    这篇文章主要介绍了css怎么改变a标签里的字体颜色的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇css怎么改变a标签里的字体颜色文章都会有所收获，下面我们一起来看看吧。首先，在页面中创建一个a标签，并添加文字；...
    99+
    2023-07-04
软考高级职称资格查询
iis服务器助手广告
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作