update GridList
This commit is contained in:
parent
5d56366825
commit
5d6342c984
@ -1,7 +1,55 @@
|
|||||||
import cls from './index.module.css';
|
import cls from './index.module.css';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
function getData(type) {
|
||||||
|
let data = [];
|
||||||
|
switch (type) {
|
||||||
|
case 'gas-i':
|
||||||
|
data = [
|
||||||
|
{ id: 1, name: '1#天然气I', value: '122m³/h' },
|
||||||
|
{ id: 2, name: '2#天然气I', value: '200m³/h' },
|
||||||
|
{ id: 3, name: '3#天然气I', value: '112m³/h' },
|
||||||
|
{ id: 4, name: '4#天然气I', value: '189m³/h' },
|
||||||
|
{ id: 5, name: '5#天然气I', value: '109m³/h' },
|
||||||
|
{ id: 6, name: '6#天然气I', value: '167m³/h' },
|
||||||
|
{ id: 7, name: '7#天然气I', value: '172m³/h' },
|
||||||
|
{ id: 8, name: '8#天然气I', value: '145m³/h' },
|
||||||
|
];
|
||||||
|
break;
|
||||||
|
case 'gas-ii':
|
||||||
|
data = [
|
||||||
|
{ id: 11, name: '1#天然气II', value: '85m³/h' },
|
||||||
|
{ id: 12, name: '2#天然气II', value: '45m³/h' },
|
||||||
|
{ id: 13, name: '3#天然气II', value: '6m³/h' },
|
||||||
|
{ id: 14, name: '4#天然气II', value: '72m³/h' },
|
||||||
|
{ id: 15, name: '5#天然气II', value: '83m³/h' },
|
||||||
|
];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
function GridList(props) {
|
function GridList(props) {
|
||||||
return <div className="gridList">Grid List Of: {props.dataSource}</div>;
|
const [dataList, setDataList] = useState([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// 这种写法有点问题。。。
|
||||||
|
console.log('data source change:', props.dataSource);
|
||||||
|
setDataList(getData(props.dataSource));
|
||||||
|
}, props.dataSource);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h1>Grid List Of: {props.dataSource}</h1>
|
||||||
|
<div className={cls.gridList}>
|
||||||
|
{dataList.map((item) => (
|
||||||
|
<div className={cls.listItem}>
|
||||||
|
{item.name}: {item.value}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default GridList;
|
export default GridList;
|
||||||
|
Loading…
Reference in New Issue
Block a user