React里的Fragment标签的具体使用

更新时间：2023年01月31日 09:46:07 作者：慢谷

本文主要介绍了React里的Fragment标签的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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

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标签内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解React组件卸载怎么中止递归方法
最近在处理项目代码的时候,出现了一个bug,组件中的方法在组件卸载后仍然在执行,代码片段发给我看,但是变量的用意我也不懂,只看到有方法调用自身方法,这不就是递归嘛,所以本文详细给大家介绍了React组件卸载怎么中止递归方法,需要的朋友可以参考下
2024-01-01
深入了解React中的虚拟DOM
欢迎来到今天的探险之旅！在这篇博客中,我们将深入了解 React 中神奇的虚拟DOM,并通过一个简单的例子来揭开其神秘面纱,文中通过代码示例也讲解非常详细,感兴趣的朋友可以参考下
2024-01-01
react中的useEffect()的使用详解
useEffect()是react中的hook函数,作用是用于创建由渲染本身引起的操作,介绍了依赖项数组不同的区别,对react useEffect()使用相关知识感兴趣的朋友一起看看吧
2024-05-05
sass在react中的基本使用(实例详解)
这篇文章主要介绍了sass在react中的基本使用,主要包括安装sass和编写APP.tsx中的基本dom，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-09-09
nodejs和react实现即时通讯简易聊天室功能
这篇文章主要介绍了nodejs和react实现即时通讯简易聊天室功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-08-08
React三大属性之Refs的使用详解
这篇文章主要介绍了React三大属性之Refs的使用详解，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下
2021-04-04
React.js入门学习第一篇
这篇文章主要为大家介绍了React.js入门学习第一篇，详细解析React.js基础知识，全方位的了解React.js，感兴趣的小伙伴们可以参考一下
2016-03-03
react中的useImperativeHandle()和forwardRef()用法
这篇文章主要介绍了react中的useImperativeHandle()和forwardRef()用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
React实现数字滚动组件numbers-scroll的示例详解
数字滚动组件，也可以叫数字轮播组件，这个名字一听就是非常普通常见的组件。本文将利用React实现这一组件，感兴趣的小伙伴可以了解一下
2023-03-03
基于Node的React图片上传组件实现实例代码
本篇文章主要介绍了基于Node的React图片上传组件实现实例代码，非常具有实用价值，需要的朋友可以参考下
2017-05-05