前言:
? ? ? ?在react16.8版本后新增加了hook,这里来记录下hook里面的State Hook
具体使用:
1、引入
import React, { useState } from 'react'
2、定义一个变量digitalFlopData ,并提供更改他的方法为setData,
注意,这里的setData不是固定的,是可以自己定义的
export default () => {
const [digitalFlopData, setData] = useState([])
}
3、定义一个函数,并在函数中给我们刚的变量赋值
createData()
function createData() {
setData(getData())
}
4、定义数据函数getData
function getData() {
return [
{
title: '管养里程',
number: {
number: [randomExtend(20000, 30000)],
content: '{nt}',
textAlign: 'right',
style: {
fill: '#4d99fc',
fontWeight: 'bold',
},
},
unit: '公里',
}
]
}
5、在界面上使用我们的变量 digitalFlopData
return (
<div id="digital-flop">
{digitalFlopData.map(item => (
<div className="digital-flop-item" key={item.title}>
<div className="digital-flop-title">{item.title}</div>
<div className="digital-flop">
<DigitalFlop config={item.number} style={{ width: '100px', height: '50px' }} />
<div className="unit">{item.unit}</div>
</div>
</div>
))}
<Decoration10 />
</div>
)
到此为止!
|