时间戳

首页 > 解决方案 > React Fragment 如何改进布局？

reactjs - React Fragment 如何改进布局？

问题描述

这是 Next.js 官方指南，布局

export default function Layout({ children }) {
  return <div>{children}</div>
}

我正在查看一个带有布局的 repo

import { Component, Fragment } from 'react'

const Layout = ({ children }) => {
    return (
        <React.Fragment>
            <p>header</p>
            {children}
            <p>footer</p>
        </React.Fragment>
    );
};

export default Layout;

React Fragment 的优缺点是什么？

标签： reactjs

解决方案

任何组件都必须返回一个元素。有三个要素：

<p>header</p> //1
{children}    //2 +
<p>footer</p> //3

因此，它们将被一些标签（div、main 等）包裹：

<div>
    <p>header</p>
    {children}
    <p>footer</p>
</div>

呈现为：

 <body>
    <div>
      <p>header</p>
      <p>first paragraph</p>
      <p>second paragraph</p>
      <p>footer</p>
    <div>
 </body>

使用片段（您可以使用<>或<React.Fragment>）：

<>
   <p>header</p>
   {children}
   <p>footer</p>
</>

呈现为：

 <body>
      <p>header</p>
      <p>first paragraph</p>
      <p>second paragraph</p>
      <p>footer</p>
 </body>

当您有一行作为组件时，在表格中使用 Fragment 也很方便 - 您不会破坏标记。

在底层，JSX 变成了这样的代码：

"use strict";

const layout = ({
  children
}) => {
  return React.createElement(
             "div", // HTML tag name or React.Fragment
              null, // Props or attributes (for div)
              React.createElement("p", null, "header"), // 1th children of div
              children,                                 // 2nd children of div
              React.createElement("p", null, "footer")  // 3rd children of div
        );
};

如您所见React.createElement()，获取三个参数，其中第一个是 rootHTML tag或 aFragment而不是它，它的内容将被放置。与 不同HTML tags，aFragment只能有一个key属性（也只能由 使用React）

推荐阅读