在react中使用组件的标签页写订单管理页面

在制作商城类的项目中，成功购物后，会生成订单，我们跳转到订单页面后就会需要使用这个标签页的组件。

首先呢我需要一个来渲染标签标题的一个数组。但是可以更便捷的方法就是直接将数组写入tabs标签内就进行遍历渲染。

// 使用styleCss对象中的style_name样式来设置外层div的样式
<div className={styleCss.style_name}>
    // 定义一个类名为demo-tabs的div，用于包裹Tabs组件
    <div className='demo-tabs'>
        // 创建一个Tabs组件，并设置当前激活的标签为'c'（这可能是一个错误或特定逻辑，因为后面没有直接对应id为'c'的标签）
        <Tabs active='c'>
            // 使用map函数遍历一个数组，该数组包含了各个标签的配置信息
            {[{
                title: '全部', // 标签标题
                id: ''         // 标签id（此处为空，可能用于特殊逻辑处理）
            },
            {
                title: '待付款',
                id: 1
            },
            {
                title: '已付款',
                id: 2
            },
            {
                title: '已发货',
                id: 3
            },
            {
                title: '已收货',
                id: 4
            }].map((item, index) => (
                // 对于数组中的每个元素，创建一个Tabs.TabPane组件
                <Tabs.TabPane 
                    // 使用item对象作为name属性（这里可能有误，通常应该使用item.id或其他唯一标识符）
                    name={item} 
                    // 使用item.id作为key，确保每个TabPane组件都有唯一的key
                    key={item.id} 
                    // 当标签被点击时，调用tabClick函数并传入当前item对象
                    onChange={() => tabClick(item)} 
                    // 设置标签的标题
                    title={`${item.title}`}
                >
                    // 遍历bigData数组，为每个数据项创建一个div块
                    {bigData.map(item => (
                        <div key={item.id} className={styleCss.block}>
                            <div className={styleCss.top}>
                                <p>订单编号:{item.order}</p> // 显示订单编号
                            </div>
                            <div className={styleCss.center}>
                                <img 
                                    src={'http://jingxun.kuxia.top' + item.commodity[0].image} 
                                    alt="" // 显示商品图片
                                />
                                <div className={styleCss.price}>
                                    <p>{item.commodity[0].title}</p> // 显示商品标题
                                    <p>x{item.commodity[0].num}</p> // 显示购买数量
                                </div>
                                <div className={styleCss.fu}>
                                    // 根据item.state的值判断订单状态，并显示相应的文本
                                    <span>{item.state == 1 ? '待付款' : item.state == 2 ? '已付款' : item.state == 3 ? '已发货' : '已收货'}</span>
                                </div>
                            </div>
                            <div className={styleCss.bottom}>
                                <p>应付:￥{item.commodity[0].price}</p> // 显示应付金额
                                <div>
                                    <p className={styleCss.cancel}>取消订单</p> // 显示取消订单按钮
                                    <p className={styleCss.pay}>付款</p> // 显示付款按钮
                                </div>
                            </div>
                        </div>
                    ))}
                </Tabs.TabPane>
            ))}
        </Tabs>
    </div>
</div>

点击标签栏如何确认显示不同的数据：

标签配置数组：首先，通过定义一个数组，其中每个元素都是一个对象，包含title和id属性，来定义不同的标签。

遍历标签配置数组：使用map函数遍历这个数组，为每个元素创建一个Tabs.TabPane组件。Tabs.TabPane组件的name属性、key属性和title属性分别由当前遍历的元素决定。

标签点击事件：为每个Tabs.TabPane组件的onChange属性绑定一个函数，该函数在标签被点击时调用，并传入当前遍历到的标签配置对象。

Tabs组件的工作机制：Tabs组件内部会根据active属性或用户点击事件来显示或隐藏不同的Tabs.TabPane组件。这样，用户就可以通过点击不同的标签来查看不同状态下的订单信息。

原文地址：https://blog.csdn.net/Li370234940/article/details/144403267

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！