反应钩子 - 根据条件突出显示一周中的某一天

Question

import React, { useEffect, useState } from 'react';
import './Footer.css';
import axios from '../../axios';
import classnames from 'classnames';
import {
Container, Row, Col, Card, CardImg, CardText, CardBody,
CardTitle
} from 'reactstrap';
const moment = require('moment');
const Footer = () => {
const [data, setData] = useState('');
const [isBoolean, setBoolean] = useState(false);
useEffect(() => {
(async () => {
const { data } = await axios.get('../days.json');
setData(data);
console.log(data);
})();
const today = moment().format('dddd');
console.log(today);
}, []);

<ul className="footer-hours">
{data && data.map((day, index) => {
return (
<li key={index}>{day.day}</li>
);
})}
</ul>

我有一个工作日的列表，如何根据当天从渲染列表中动态添加当天的样式？目前，我只能突出显示或添加列表中的所有项目样式。 谢谢。

Answer 1

在map通话中，您同时拥有当天和索引。大概你在某个地方有什么东西告诉你你想强调哪一天。因此，您可以使用它将style或(更好的(className放在相关日期，例如：

return (
<li> key={index} className={index === currentDayIndex ? "current" : null}>{day.day}</li>
);

。如果您有当天的索引作为currentDayIndex.