布局组件以及为什么我们在 React 中使用它

这篇博文开启了一系列探索 React 组件的文章。开发者在开发应用程序时，需要决定使用哪些组件以及它们的用途。

在这篇博文中，我将介绍布局组件——每个应用程序中都极其有用的组件。

布局组件的用途

这个组件的作用正如其名称所示——它定义了应用程序的布局。它只是接受children并将props它们一起渲染到DOM中，或者单独渲染到DOM中。

将其与项目中的其他组件分开放在单独的文件夹中是一种很好的做法，如下所示：

布局组件的使用

在 Layout 文件夹中，我们创建Layout.js文件并将布局组件的代码存储在那里：

import React from 'react';

const Layout =({children}) =>{
    return(
        <>
        <div>
            <ToolBar/>
            <Sides/>
            <Backdrop/>
        </div>
        <main>{children}</main>
        </>
    )
}

export default Layout;

在主App.js文件中，我们导入 Layout 并用它包装我们的应用程序：

import React from "react";
import Layout from "./components/Layout/Layout";

function App() {
  return (
    <>
      <Layout>
        <p>Test</p>
      </Layout>
    <>
  );
}

export default App;

因此，我们将布局逻辑分离到组件中，如果我们以后想要更改布局，只需更改一个组件即可轻松完成。

可重复使用的布局组件

由于 Layout 组件非常简单，开发人员可以在应用程序的其他部分重复使用相同的页面布局。此外，还可以使用 FlexBox 或 Grid 属性创建自定义的可重用布局，如下所示：

<Flexbox vertical gap={3}>
  <Flexbox noGrow>
    <h1>A Title for You</h1>
  </Flexbox>
  <Flexbox bottom>
    <p>Your cool paragraph.</p>
  </Flexbox>
</Flexbox>

使用可重复使用的布局是一种非常好的做法，因为它允许您编写一次代码并在应用程序的许多部分中使用它。

以下是构建应用程序时可以使用的一些可重复使用的布局组件：

1. React 网格布局-演示和代码
2. React Flexbox 网格-代码
3. React Material-UI 网格-源代码
4. Grommet 网格布局-源代码
5. React Bootstrap / Reactstrap 网格布局-源代码
6. 自动响应 React -代码
7. React 堆栈网格-演示和代码
8. Hedron -代码
9. React 网格系统-代码
10. Rebass React 网格-代码
11. Semantic-UI React 网格-源代码
12. Reflexbox -代码

感谢您阅读我的博客。欢迎在LinkedIn或Twitter上与我联系:)