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

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>
        )
    }
}


QQ截图20210405211811.png

如图,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组件内
QQ截图20210405212333.png

使用空标签注意事项
  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>
        )
    }
}

QQ截图20210405212333.png

使用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>
        )
    }
}

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