博客
关于我
React 学习笔记 —— Fragment
阅读量:563 次
发布时间:2019-03-09

本文共 1071 字,大约阅读时间需要 3 分钟。

Handling Multiple Roots in React JSX

In React's JSX syntax, it's essential to use a single root tag. To avoid unnecessary extra div tags and hierarchical structures, we can use two main approaches.

Fragment Approach

The Fragment component is designed to be ignored in rendering. It allows embedding multiple root components without adding extra DOM nodes to the tree. Perfect for when you need to #[key] your fragments. If you have loops and dynamic content, specify the key attribute for each fragment is crucial.

Example:

import {Fragment} from 'react';...      test     test

Empty Tag Approach

Using empty tags is another great way to embed multiple root nodes without creating real DOM elements. They don’t accept any attributes since they’re meant purely for embedding HTML.

Example:

...   test   test

The key difference between Empty Tags and Fragments is that Fragments can only accept **key** attribute, which is important when you're dealing with list-like structures. However, Empty Tags have no such limitations and are often used for simple content embedding.

转载地址:http://ajxpz.baihongyu.com/

你可能感兴趣的文章
Mstsc 远程桌面链接 And 网络映射
查看>>
Myeclipse常用快捷键
查看>>
MyEclipse用(JDBC)连接SQL出现的问题~
查看>>
myeclipse的新建severlet不见解决方法
查看>>
MyEclipse设置当前行背景颜色、选中单词前景色、背景色
查看>>
MyEclipse配置SVN
查看>>
MTCNN 人脸检测
查看>>
MyEcplise中SpringBoot怎样定制启动banner?
查看>>
MyPython
查看>>
MTD技术介绍
查看>>
MySQL
查看>>
MySQL
查看>>
mysql
查看>>
MTK Android 如何获取系统权限
查看>>
MySQL - 4种基本索引、聚簇索引和非聚索引、索引失效情况、SQL 优化
查看>>
MySQL - ERROR 1406
查看>>
mysql - 视图
查看>>
MySQL - 解读MySQL事务与锁机制
查看>>
mysql 1264_关于mysql 出现 1264 Out of range value for column 错误的解决办法
查看>>
mysql 1593_Linux高可用(HA)之MySQL主从复制中出现1593错误码的低级错误
查看>>