Reactjs React Fragment如何改进布局？_Reactjs

Reactjs React Fragment如何改进布局？

reactjs

Reactjs React Fragment如何改进布局？,reactjs,Reactjs,这是下一个.js官方指南，布局 export default function Layout({ children }) { return <div>{children}</div> } 我在看一个回购协议，布局 import { Component, Fragment } from 'react' const Layout = ({ children }) => { return ( <React.Fragment>

这是下一个.js官方指南，布局

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

我在看一个回购协议，布局

import { Component, Fragment } from 'react'

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

export default Layout;

React片段的利弊是什么？

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

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

如您所见，React.createElement获得三个参数，第一个参数是根HTML标记或片段，而不是它的内容。与HTML标记不同，片段只能有一个键属性，该属性也只能由React使用。任何组件都必须返回一个元素。有三个要素：

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

如您所见，React.createElement获得三个参数，第一个参数是根HTML标记或片段，而不是它的内容。与HTML标记不同，片段只能有一个键属性，该属性也只能由React使用

如果使用片段，则不会呈现HTML标记如果使用片段，则不会呈现HTML标记

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

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

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

"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
        );
};