React Fragment

最新推荐文章于 2024-11-07 16:38:18 发布

瑞晟技术服务中心-耿瑞

最新推荐文章于 2024-11-07 16:38:18 发布

阅读量388

点赞数 3

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45966674/article/details/128721974

版权

文章介绍了在React项目中，如何通过使用Fragment来避免在子组件中添加不必要的外层div，从而保持干净的元素层级和减少DOM节点。在创建子组件时，如果不需要额外的包裹元素，Fragment可以作为一个无痕的根节点替代div，提高代码的可读性和性能。

摘要由CSDN通过智能技术生成

首先我们编写这样一个例子

我们在创建一个react项目

在src的目录下创建components目录

components下创建一个子组件我这里的名字叫 subset.jsx

import React from "react";

export default class subset extends React.Component{
  constructor(props){
    super(props);
    this.state = {
    }
  }

  render(){
    return (
      <div>
         <li>子集1</li>
         <li>子集2</li>
         <li>子集3</li>
         <li>子集4</li>
      </div>
    )
  }
}

然后再在components下创建一个父组件我这里叫 record.jsx
参考代码如下

import React from "react";
import Subset from "./subset";

export default class record extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      cont: 0,
    }
  }

  render(){
    return (
      <div className="App">
         <ul>
             <Subset/>
         </ul>
      </div>
    )
  }
}

然后我们运行代码
在这里插入图片描述
效果确实是对的但我们打开F12看元素层级

我们会发现 ul和li之间多了一个div 很多人就会吐槽啦说:你子组件不是自己写的外面一块div嘛？现在又来说问题

是子组件外面的div是我自己写的没错但是如果我们没有一个跟节点组件是要报错的啊
在这里插入图片描述
组件是必须要有一个根节点包起来的

此时我们可以用Fragment 修改subset.jsx子组件代码如下

import React,{Fragment} from "react";

export default class subset extends React.Component{
  constructor(props){
    super(props);
    this.state = {
    }
  }

  render(){
    return (
      <Fragment>
         <li>子集1</li>
         <li>子集2</li>
         <li>子集3</li>
         <li>子集4</li>
      </Fragment>
    )
  }
}