React Fragment

news2024/9/27 21:27:21

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

我们在创建一个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>
    )
  }
}