<> 与 React.Fragment 的区别

<>React.Fragment 的简写标签。它允许我们对元素列表进行分组,而无需将它们包装到新节点中。

建议:基本上,我们应该在任何时候使用 React.Fragment<>,它可以避免不必要的 div 包装器,得到一个更加清晰的标签结构。

所以我们可以这样做:

return (
  <>
    <Header />
    <Navigation />
    <Main />
    <Footer />
  </>
)

它们之间唯一的区别是简写版本不支持 key 属性。

以下是在多行字符串中插入新行(br)标签的常见示例:

{
  str.split('\\n').map((item, index) => {
    return (
      <Fragment key={index}>
        {item}
        <br />
      </Fragment>
    )
  })
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组,而无需向 DOM 添加...
    越前君阅读 2,071评论 0 3
  • Fragment 组件能够在不额外创建 DOM 元素的情况下,让 render() 方法中返回多个元素。 一个常见...
    生命里那束光阅读 262评论 0 3
  • 1. 什么是React? React是一个开源前端JavaScript库,用于构建用户界面,尤其是单页面应用程序。...
    Yana_Lin阅读 544评论 1 0
  • React-1 课程内容 React 是什么? 一个用于构建用户界面的 JavaScript 库 命令式编程 和 ...
    lucky_yao阅读 520评论 0 1
  • 学习来源 B站尚硅谷的课程 react 概述 用于构建用户界面的js库 react库的组成 核心库:react.j...
    squidbrother阅读 892评论 0 0