博客
关于我
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/

你可能感兴趣的文章
MySQL与Oracle的数据迁移注意事项,另附转换工具链接
查看>>
mysql丢失更新问题
查看>>
MySQL两千万数据优化&迁移
查看>>
MySql中 delimiter 详解
查看>>
MYSQL中 find_in_set() 函数用法详解
查看>>
MySQL中auto_increment有什么作用?(IT枫斗者)
查看>>
MySQL中B+Tree索引原理
查看>>
mysql中cast() 和convert()的用法讲解
查看>>
mysql中datetime与timestamp类型有什么区别
查看>>
MySQL中DQL语言的执行顺序
查看>>
mysql中floor函数的作用是什么?
查看>>
MySQL中group by 与 order by 一起使用排序问题
查看>>
mysql中having的用法
查看>>
MySQL中interactive_timeout和wait_timeout的区别
查看>>
mysql中int、bigint、smallint 和 tinyint的区别、char和varchar的区别详细介绍
查看>>
mysql中json_extract的使用方法
查看>>
mysql中json_extract的使用方法
查看>>
mysql中kill掉所有锁表的进程
查看>>
mysql中like % %模糊查询
查看>>
MySql中mvcc学习记录
查看>>