react组件中最外层不想使用标签包裹，不想太多dom层级嵌套的实现方式

在react组件开发中，render方法最终需要返回一个dom结构，并且最外层只能有一个标签层级（内部可以多级） 例如：Home页面中引入一个Test组件 Home.jsx

import React, { Component } from 'react'
import Test from "../../components/Test"
export default class Home extends Component {
    render() {
        return (
            <div>
                <Test></Test>
            </div>
        )
    }
}

Test.jsx

import React, { Component} from 'react'

export default class Test extends Component {
    render() {
        return (
            <div className="test">
                <p className="title">我是子组件</p>
                <button>我是子组件的按钮</button>
            </div>
        )
    }
}

如图，Test组件在渲染的时候会包裹在一个class 名为 test的 div里，如果我们不想让最外层的div实际渲染出来，不出现在dom节点里，需要怎么操作呢？下面有两种实现方法

空标签<></>

我们以Test组件为例，最外层不使用div包裹，直接使用空标签

import React, { Component} from 'react'

export default class Test extends Component {
    render() {
        return (
            <>
                <p className="title">我是子组件</p>
                <button>我是子组件的按钮</button>
            </>
        )
    }
}

可以看到，Test组件的内容直接渲染在了Home组件内

使用空标签注意事项

1. 空标签不能有任何属性
2. 只能用于简单的展示性的组件渲染，不能用于列表循环（因为不能设置节点的key）

Fragment

Test组件 从react中引入Fragment，使用Fragment包裹子组件的内容

//引入Fragment
import React, { Component,Fragment} from 'react'

export default class Test extends Component {
    render() {
        return (
            <Fragment>
                <p className="title">我是子组件</p>
                <button>我是子组件的按钮</button>
            </Fragment>
        )
    }
}

使用Fragment注意事项

1. Fragment 只能设置 key 属性，不能设置其他属性
2. 在进行列表渲染的时候，不想太多的层级嵌套，可以使用Fragment

使用Fragment包裹列表循环中dom

//引入Fragment
import React, { Component,Fragment} from 'react'

export default class Test extends Component {
    state = {
        list:[
            {id:1,name:'张三',age:10},
            {id:2,name:'李四',age:15},
            {id:3,name:'王五',age:18},
        ]
    }
    render() {
        let {list} = this.state;
        return (
            <div className="list">
                <div className="personList">
                    {
                        list.map(item=>{
                            return (
                                <Fragment key={item.id}>
                                    <p className="item">
                                        <span className="name">{item.name}</span>
                                        <span className="age">{item.age}</span>
                                    </p>
                                </Fragment>
                            )
                        })
                    }
                </div>
            </div>
        )
    }
}

实际效果如下图，这里只是做一个简单的演示，具体使用场景可以自行考量