Reactjs 在React中寻找强调卡片的帮助

晚上好,

我正在学习使用React进行开发，并且有几周的使用经验，所以请友好地回答，因为我还不太了解这个词汇

这是我的问题：

我正在渲染一个卡片列表，我被告知只强调一张卡片，其中包含排序/筛选后下一张卡片的日期，同时仍渲染数组中的其他卡片。我想我可以应用CSS样式来进行强调，但我想知道在对对象数组进行排序或过滤时（通过添加类、id等或其他方法），如果所有卡片都具有相同的属性，如何将一张离散卡片作为目标

---

有什么想法或指导吗？感谢所有帮助，并提前向您表示感谢

有一百万种方法可以做到这一点，这就是其中之一

从“React”导入React；
常量项=（{ishighlight}）=>{
常量样式={
高度：'50px'，
marginTop:'10px'，
边框：isHighlighted？“2px纯红色”：“1px纯黑色”
};
返回
};
导出默认值（{}）=>{
常数项=[{
id:'1'，
日期：新日期（“2019-01-01”），
名称：'item1'
}, {
id:'2'，
日期：新日期（“2019-01-03”），
名称：'item1'
}, {
id:'3'，
日期：新日期（“2019-01-02”），
名称：'item1'
}];
const highlightedItem=items.reduce（（acc，item）=>{
如果（item.date>acc.closestDate）{
返回{
id:item.id，
关闭日期：item.date
}
}否则{
返回acc；
}
}, {
id:“”，
关闭日期：新日期（0）
});
返回(
{
items.map（item=>）
}
);
}

您是否已尝试自己编写此代码？我已让应用程序呈现所有卡片，但没有，我尚未尝试编写突出显示的卡片要求。“我不知道该如何开始。”CharlesBelcher为您提供了答案吗？

import React from 'react';

const Item = ({ isHighlighted }) => {
    const style = {
        height: '50px',
        marginTop: '10px',
        border: isHighlighted ? '2px solid red' : '1px solid black'
    };

    return <div style={style} />
};

export default ( { } ) => {

    const items = [{
        id: '1',
        date: new Date("2019-01-01"),
        name: 'item1'
    }, {
        id: '2',
        date: new Date("2019-01-03"),
        name: 'item1'
    }, {
        id: '3',
        date: new Date("2019-01-02"),
        name: 'item1'
    }];

    const highlightedItem = items.reduce((acc, item) => {
        if (item.date > acc.closestDate) {
            return {
                id: item.id,
                closestDate: item.date
            }
        } else {
            return acc;
        }
    }, {
        id: '',
        closestDate: new Date(0)
    });

    return (
        <div>
           {
               items.map(item => <Item isHighlighted={item.id === highlightedItem.id} />)
           }
        </div>
    );
}