如何使用打字稿在两个区域选项卡中显示数据并做出反应？

Question

我有对象的数据数组，如下所示，

const items = [{
  id: '1',
  subItems: [
    id: '2',
    parentItem: '1',
    orders: [{
        status: 'new',
        title: 'subitem-order1',
        id: '3',
      },
      {
        status: 'assigned',
        title: 'subitem-order2',
        id: '4',
      },
    ],
    orders: [{
        id: '5',
        status: 'accepted',
        title: 'item-order1',
      },
      {
        id: '6',
        status: 'done',
        title: 'item-order2',
      }
    ]
  ]
}];

从上面的代码中可以看到，它具有订单和子项目订单。订单和子项目订单的数据将按照创建顺序显示在列表中。

下面是将其显示为弹出式列表的代码。

function Parent() {
    const items = [{
        id: '1',
        subItems: [
            id: '2',
            parentItem: '1',
            orders: [
                {
                    status: 'new',
                    title: 'subitem-order1',
                    id: '3',
                },
                {
                    status: 'assigned',
                    title: 'subitem-order2',
                    id: '4',
                },
            ],
            orders: [
                {
                    id: '5',
                    status: 'accepted',
                    title: 'item-order1',
                },
                {
                    id: '6',
                    status: 'done',
                    title: 'item-order2',
                } 
            ]
        ]
        
        return (
            <Popup items={items}/>
        );
    }

    function Popup({items}: Props) {
        const [activeFilter, setActiveFilter] = React.useState<OrderFilter(OrderFilter.ALL);
        const [allOrders, setAllOrders] = React.useState<Order[]>([]);

        const item = items.find(item => item.id === ItemId);

        const ordersByFilter = React.useMemo(() => {
            const orders = [
                ...(item.orders || []),
                ...(item.subItems
                    ? item.subItems.reduce((acc: any, subItem) => {
                        return [...acc, ...(subItem.orders || [])];
                    }, [])
                : []),
            ];

            const ordersByStatus = groupBy(sortedOrders, 'status');

            return {
                [OrderFilter.ALL]: sortedOrders,
                [OrderFilter.new]: ordersByStatus[OrderStatus.new] || [], // prettier-ignore
                [OrderFilter.assigned]: ordersByStatus[OrderStatus.assigned] || []
            };
        }, [item]);


        return (
            <Wrapper>
                <OrderList orders={ordersByFilter[activeFilter]}/>//this displays the items in 
                //list
            </Wrapper>
        );
    }

    function OrderList({orders}: Props) {
        return (
            orders.map(o=> {
                return (
                    <OrderCard data={0}/> //this is a div that displays content of data here
                );
            }
        );
    }
}

上面的代码在列表中同时列出了项目订单和subItems订单，如下图所示：

我希望它显示在选项卡中。弹出窗口应具有两个选项卡顺序和子项顺序。点击订单标签应显示订单，点击子项目订单应显示子项目的订单。

下图显示了单击订单时显示的项目订单：

下图显示了点击子项目订单标签显示的子项目订单：

有人可以帮助我在部分标签中显示此数据，如图所示。谢谢。