11-设计布局

优质

小牛编辑

129浏览

2023-12-01

在项目中，我们通常都会有布局组件的概念，常见的场景是整个项目通用的头尾，侧边栏，以及整体布局结构等，这些布局内容被抽象成组件，包含一些布局样式，用于组合其它组件搭建成页面。

说白了，其实它本质上还是一种组件，将布局样式抽象成组件，能够保持子组件和父组件的独立性，不用在其中关联到布局信息。

如我们的样例项目中的 MainLayout.jsx：

// ./components/MainLayout/MainLayout.jsx
import React, { PropTypes } from 'react';
import styles from './MainLayout.less';
import Header from './Header';

// 包含默认头部的布局组件
function MainLayout({ children, location }) {
  return (
    <div className={styles.normal}>
      <Header location={location} />
      <div className={styles.content}>
        <div className={styles.main}>
          {children}
        </div>
      </div>
    </div>
  );
}

MainLayout.propTypes = {
  children: PropTypes.element.isRequired,
  location: PropTypes.object,
};

export default MainLayout;

基础教程到这里就结束了，更多相关内容可参看样例完整代码。