React Fragment

2022 年 7 月 29 日
本文字数：645 字
阅读完需：约 2 分钟

Fragment

什么是 `Fragment` ？

React.Fragment 组件能够在不额外创建 DOM 元素的情况下，让 render() 方法中返回多个元素。一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。

如何使用 `Fragment`

<React.Fragment key={}> .....包裹元素</React.Fragment>
简写 <> </>

/* * @Description:  * @Author: ZhangXin * @Date: 2021-02-13 22:39:14 * @LastEditTime: 2021-02-13 22:46:12 * @LastEditors: ZhangXin */
import React, { Component } from 'react';
const list = [    {        id: 1,        tag: '前端'    },    {        id: 2,        tag: '后端'    }]
class Fragments extends Component {    constructor(props) {        super(props);        this.state = {}    }    render() {        return (            <div>                <h1>Fragments</h1>                {list.map(item => {                    return (                        //  第一种写法   React.Fragment                        <React.Fragment key={item.id}>                            {item.tag} <br />                        </React.Fragment>                    )                })}                {/* 第二种写法 */}                <>                    <h2>测试</h2>                </>                

            </div>        );    }}
export default Fragments;