react实战 : 用矩阵思想做一个自适应布局容器组件
2024-09-03 02:13:43
需求是这样的。
- 有一个需要显示若干方块型元素的小区域
- 数量比较少的时候显示一排
- 数量比较多的时候显示两排
用 grid 不好，因为当数量为奇数的时候需要两排里面的元素都乖乖的居中显示。
用 flex 的话，直接写需要写很多判断，因为行数不同的时候页面结构也会不同。
所以，我想到用二维数组（矩阵）来表示在什么时候想怎样显示。
上代码。
// 波浪效果测试 import React from 'react' import Styles from './index.less' import Wave from '../wave/index.js'
import { Flex } from 'antd-mobile' class WaveContainer extends React.Component {
constructor(props){
super(props)
this.state = {
}
} render(){
console.log(this.props.dataBar) const baseFlex = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}
const theStyle = {
main:{
...baseFlex,
width:'17.552vw',
height:'10.521vw',
color:"#fff"
},
tem:{
...baseFlex,
flex:"auto",
color:'#fff'
},
shellA:{
...baseFlex,
width:'100%',
height:'100%'
},
shellB:{
...baseFlex,
width:'100%',
height:'50%'
}
} const dataBar = this.props.dataBar const Container = ((dataBar) => { const flexMatrix = [
[0,0],
[1,0],
[2,0],
[3,0],
[2,2],
[3,2],
[3,3],
[4,3],
[4,4],
[5,4],
[5,5],
[6,5],
[6,6]
] const sData = dataBar.data.sData
const length = sData.length const matrix = flexMatrix[length] ? flexMatrix[length] : flexMatrix[12] if (matrix[0] === 0) {
return ""
} let temShell, temA, temB temA = sData.slice(0, matrix[0]).map((item, index) =>
<div style={theStyle.tem} key={index.toString()}> <Wave data={item} /> </div>
); if (matrix[1] === 0) {
temB = ""
} else {
temB = sData.slice(matrix[0], (matrix[0] + matrix[1])).map((item, index) =>
<div style={theStyle.tem} key={index.toString()}> <Wave data={item} /> </div>
);
} if (matrix[1] === 0) {
temShell = <div style={theStyle.shellA} > {temA} </div>
} else {
temShell = [0,0].map((item, index) =>
<div style={theStyle.shellB} key={"temShell" + index.toString()}> {index === 0 ? temA : temB} </div>
); theStyle.main.flexWrap = "wrap"
} console.log(temShell) return temShell
})(dataBar) return (
<div style={theStyle.main}>
{/* <Wave /> */}
{ Container }
</div>
);
}
} export default WaveContainer
稍微解释一下。
- 用展开运算符使样式更简洁。
- flexMatrix 就是记录数据的矩阵。
- temA, temB 是放一行元素的容器。
- temShell 是放 temA, temB 的容器。
- theStyle.main.flexWrap = "wrap" 让元素可以正常换行。
- slice 的作用是分割数据对象，一行只渲染一行需要的那些数据。
- [0,0] 是因为需要两行，所以用有两个元素的数组，用 map 输出 JSX。
然后是从页面传入的数据的代码。
render(){
const dataBar = {
data:{
sData:[
{ name: 'a', data: 55, color:'rgb(79,239,223)' },
{ name: 'b', data: 5, color:'rgb(79,239,223)'},
{ name: 'c', data: 36, color:'rgb(79,239,223)'},
{ name: 'd', data: 476, color:'rgb(87,207,30)'},
{ name: 'e', data: 226, color:'rgb(79,239,223)'},
{ name: 'f', data: 273, color:'rgb(251,211,36)'}
]
}
}
return (
<div className={Styles.main}>
<WaveContainer dataBar={dataBar} />
</div>
);
}
其实和他也没什么关系。因为直接把对象传入了更里面的元素。
以上。
最新文章
- UDS(ISO14229-2006) 汉译(No.2参考标准)
- 第三章 EnumUtil根据值获取枚举对象
- 《CODE》读后笔记——第21~25章
- WPF快速入门系列(1)——WPF布局概览
- 纯css3写的仿真图书翻页效果
- __FILE__,__LINE__,FUNCTION__
- Linux下多任务间通信和同步-概述
- State 状态模式
- Spark机器学习之协同过滤算法
- cookie 与 session
- js:防抖动与节流
- ConchAPI | 更智能的API监控，提升团队效率
- 搭建Android浏览器壳子
- laravel 5 优化
- Activiti动态设置办理人扩展
- TweenMax 动画库，知识点
- 最新Dashboard设计实例、技巧和资源集锦，视觉和功能两不误，妥妥的！
- 【进阶修炼】——改善C#程序质量(3)
- js中的deom ready执行的问题
- Linux配置NFS实现共享