React.js如何实现组件条件渲染 按日期分组展示交易记录

我是React新手，第一个项目是跟着YouTube上Traversy Media的教程做支出追踪工具，打算给项目加个小扩展：新增日期展示组件，把交易按日期分组显示。

• 当前页面运行效果：
• 目标实现效果（硬编码演示版本）：

核心需求：

• 仅当当前日期没有渲染过Date组件时，才渲染对应日期组件
• 相同日期的交易记录，全部归类到对应日期分组下展示
  我目前对这个需求的实现逻辑、React条件渲染的用法都存在困惑。

transactions是存储在Global Context中的数组，作为全局初始状态使用。

TransactionList 组件代码 #

const TransactionList = () => {
    const {transactions} = useContext(GlobalContext)

    return(
        <div>
            <h3>History</h3>
            <ul className='list'>
            {transactions.map(transaction => (
                <Transaction key={transaction.id} transaction={transaction}/>
                ))}
            </ul>
        <div>
    )
}

Transaction 组件代码 #

export const Transaction = ({transaction}) => {
  const { deleteTransaction } = useContext(GlobalContext)
  const sign  = transaction.amount > 0 ? '+' : '-' 

  return (
    <div>
        <ExpenseDate date={transaction.date} />
        <li className={transaction.amount > 0 ? 'plus' : 'minus' }>
            {transaction.text} <span>{sign}₹{Math.abs(transaction.amount)}</span>
        </li>
    </div>
  )
}

ExpenseDate 组件代码 #

function ExpenseDate(props){
    const month = props.date.toLocaleString('en-US', {month: 'long'})
    const year = props.date.getFullYear();
    const day = props.date.getDate();

    return (
        <span className="expense-date">
            <span >{day}</span> <span >{month}</span> <span >{year}</span>
        </span>
    )
} 

我猜测实现这个条件渲染逻辑的第一步，是把ExpenseDate组件从<li>标签的子节点中移出，非常感谢大家提供的帮助，谢谢:))

内容的提问来源于stack exchange，提问作者अंशुल