在Material-UI中,要在CardHeader字幕文本前显示计时器图标,可以通过以下步骤实现:
import React, { useState, useEffect } from 'react';
import { Card, CardHeader, Avatar, IconButton } from '@material-ui/core';
import TimerIcon from '@material-ui/icons/Timer';
const Timer = () => {
const [time, setTime] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setTime(prevTime => prevTime + 1);
}, 1000);
return () => {
clearInterval(interval);
};
}, []);
return (
<IconButton>
<TimerIcon />
{time}
</IconButton>
);
};
<Card>
<CardHeader
avatar={
<Avatar>
<Timer />
</Avatar>
}
title="Card Title"
subheader="Subtitle"
/>
</Card>
这样,就可以在CardHeader字幕文本前显示一个计时器图标,并且实时更新计时器的数值。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云