博客

三栏布局作为常用布局，在react下实现方式

一、设计思路

1.三栏布局要保证主数据的优先显示，因此将主元素优先渲染

2.主布局留出最小宽度

3.左右两栏是否留存间隙

4.内容区域如何传递

5.该组件是否有自己的状态

二、代码实现（函数组件）

import React from 'react';
import './index.css'

function Layout(props) {
    const defaultProps={
        minWidth:800,
        leftWidth:200,
        rightWidth:200,
        gerder:0
    }
    const data = Object.assign({},defaultProps,props)
    return (
        <div className='layout-wrapper'>
            <div className="layout-main" style={{
                minWidth:data.minWidth,

            }}>
                {props.children}
            </div>
            <div className="layout-left" style={{
                minWidth:data.leftWidth,
                marginRight:data.gerder
            }}>
                {props.leftContainer}
            </div>
            <div className="layout-right" style={{
                minWidth:data.rightWidth,
                marginLeft:data.gerder
            }}>
                {props.rightContainer}
            </div>
        </div>
    );
}

export default Layout;

为保证使用体验该组件内置属性如下

 leftWidth左边栏宽度
 rightWidth右边栏宽度
 主区域直接在标签内写
 leftContainer左边区域内容
 rightContainer 右边区域内容
 gerder  侧边栏之间的间距

#### react中任何方法元素都可以以属性进行传递 标签内的元素将作为属性的children传递，因此主区域接收值为props.childer.   左右两栏原理同上