三栏布局作为常用布局,在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. 左右两栏原理同上
版权声明:本文为hoverdisply原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。