使用React.Fragment替代render函数中div的包裹

缺乏、安全感 2023-06-02 09:16 80阅读 0赞

### 1、在 React 中，render 函数中 return 的内容只能有一个根节点，如果多个元素嵌套，需要用一个标签元素包裹 ###

这个包裹的标签通常用 div，示例如下：

class App extends Component {
      render() {
        return (
          <div>
            　　<h1>大标题</h1>
            　　<h2>小标题</h2>
          　　</div>
        );
      }
    }

此时 \#root 下的结构：

![1731684-20190807204627176-1593640827.png][]

### 2、如果不加 div，会报错 ###

示例如下：

class App extends Component {
      render() {
        return (
          <h1>大标题</h1>
              <h2>小标题</h2>
        );
      }
    }

![1731684-20190807175047945-44323017.png][]

### 3、不加 div 的解决办法：用 React.Fragment 替代 ###

示例如下：

class App extends Component {
      render() {
        return (
          <React.Fragment>
            　　<h1>大标题</h1>
            　　<h2>小标题</h2>
          　　</React.Fragment>
        );
      }
    }

此时 \#root 下的结构就不会多出一个“烦人”的 div 啦

![1731684-20190807204717582-1572814077.png][]

转载于:https://www.cnblogs.com/Leophen/p/11316829.html

[1731684-20190807204627176-1593640827.png]: /images/20230601/4829a67c594c4b50b9fe54c4e984806e.png
[1731684-20190807175047945-44323017.png]: /images/20230601/baba8a8586d446ba9e27ca69d34d7d62.png
[1731684-20190807204717582-1572814077.png]: /images/20230601/bff6018df1d14acbaf4281f8d8a9aa05.png

发表评论取消回复

表情：

评论列表（有 0 条评论，80人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue render函数怎样使用

一般来说，vue提供了template，让我们写页面的时候非常方便 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text

痛定思痛。/ 2023年06月16日 10:41/ 0 赞/ 31 阅读

相关 Vue render 函数中使用this

1.在render中直接使用this,on里面click函数不是箭头函数使用this需要在父级将this保存起来才能使用 render: (h, params)

亦凉/ 2023年06月08日 04:58/ 0 赞/ 21 阅读

相关使用React.Fragment替代render函数中div的包裹

1、在 React 中，render 函数中 return 的内容只能有一个根节点，如果多个元素嵌套，需要用一个标签元素包裹这个包裹的标签通常用 div，示例如下：

缺乏、安全感/ 2023年06月02日 09:16/ 0 赞/ 81 阅读

相关 vue 的 render 函数

import Vue from 'vue' import App from './App.vue' import store from "@/store

左手的ㄟ右手/ 2022年12月25日 11:50/ 0 赞/ 139 阅读

相关详解在vue项目中使用render函数

https://forum.vuejs.org/t/render-new-vue/16084/5 https://www.jb51.net/article/148712.ht

骑猪看日落/ 2022年11月04日 11:14/ 0 赞/ 212 阅读

相关 VUE_render渲染函数基础使用，使用render函数创建自定义按钮

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

妖狐艹你老母/ 2022年11月04日 00:51/ 0 赞/ 373 阅读

相关使用iView中的render函数,格式化日期数据

iview和element大部分功能相同,但是发现它并没有formatter,在使用它的table组件的时候,有一行需要时间戳要转换成指定的日期格式,感觉以后还会用到,特此记录

逃离我推掉我的手/ 2022年10月01日 12:50/ 0 赞/ 436 阅读

相关 vue中的render函数介绍

简介：对于不了解slot的用法（参考：[大白话vue-slot的用法][vue-slot]）又刚接触render函数的同学来说，官网的解释无疑一脸懵逼，这里就整理下个人对ren

逃离我推掉我的手/ 2022年01月27日 20:47/ 0 赞/ 295 阅读

相关 Vue的render函数

回忆Vue的一些基本概念今天我们学习的目的是了解和学习Vue的`render`函数。如果想要更好的学习Vue的`render`函数相关的知识，我们有必要重温一下Vue中

冷不防/ 2021年09月07日 06:21/ 0 赞/ 412 阅读

相关使用IView中的render函数,格式化日期数据

iview和element大部分功能相同,但是发现它并没有formatter,在使用它的table组件的时候,有一行需要时间戳要转换成指定的日期格式,感觉以后还会用到,特...

朱雀/ 2020年11月07日 04:11/ 0 赞/ 943 阅读