Javascript 在react中有条件地呈现选项卡内的组件

我正在为酒店后端开发管理面板

在这里，我想检查已验证的状态并相应地进行渲染

这就是我所做的

    const AdminDashboard = () => {
        return (
            <>
                <DashboardWrapper>
                    <h1 className="title1 text-center mb-4">Admin Dashboard</h1>;
                    {Object.values(hotel).map((item) => {
                        if (item.verifiedStatus === "verified") {
                            return <AdminCard key={item._id} item={item} />;
                        }
                        <Tabs defaultActiveKey="1">
                            <TabPane tab="Pending" key="1" className="tabs"></TabPane>

                            <TabPane tab="Verified" key="2" className="tabs"></TabPane>
                            <TabPane tab="Rejected" key="3" className="tabs">
                                Rejected Hotels
                            </TabPane>
                        </Tabs>;
                    })}
                </DashboardWrapper>
            </>
        );
    };

const AdminDashboard=（）=>{
返回(
管理仪表盘；
{Object.values（hotel.map）（（项目）=>{
如果（item.verifiedStatus==“已验证”）{
return
您可以在选项卡defaultActiveKey中执行相同的条件。使用TabPane键与来自后端的verifiedStatus相同。使用defaultActiveKey中的item.Verified条件

例如：

<Tabs defaultActiveKey={item.verifiedStatus}>
 <TabPane tab="Pending" key="pending" className="tabs"></TabPane>

                            <TabPane tab="Verified" key="verified" className="tabs"></TabPane>
                            <TabPane tab="Rejected" key="rejected" className="tabs">
                                Rejected Hotels
                            </TabPane>
                        </Tabs>


被拒绝的酒店
这就是我的工作方式

<DashboardWrapper>
                    <h1 className="title1 text-center mb-4">Admin Dashboard</h1>;
                    <Tabs defaultActiveKey="1">
                        {Object.values(hotel).map((item) => {
                            if (item.verifiedStatus === "pending") {
                                return (
                                    <TabPane tab="Pending" key="pending" className="tabs">
                                        <AdminCard key={item._id} item={item} />;
                                    </TabPane>
                                );
                            } else if (item.verifiedStatus === "verified") {
                                return (
                                    <TabPane tab="verified" key="verified" className="tabs">
                                        <AdminCard key={item._id} item={item} />;
                                    </TabPane>
                                );
                            } else {
                                return (
                                    <TabPane tab="rejected" key="rejected" className="tabs">
                                        <AdminCard key={item._id} item={item} />;
                                    </TabPane>
                                );
                            }
                        })}
                    </Tabs>
                    ;
                </DashboardWrapper>



管理仪表盘；
{Object.values（hotel.map）（（项目）=>{
如果（item.verifiedStatus==“待定”）{
返回(
;
);
}否则如果（item.verifiedStatus==“已验证”）{
返回(
;
);
}否则{
返回(
;
);
}
})}
;

<DashboardWrapper>
                    <h1 className="title1 text-center mb-4">Admin Dashboard</h1>;
                    <Tabs defaultActiveKey="1">
                        {Object.values(hotel).map((item) => {
                            if (item.verifiedStatus === "pending") {
                                return (
                                    <TabPane tab="Pending" key="pending" className="tabs">
                                        <AdminCard key={item._id} item={item} />;
                                    </TabPane>
                                );
                            } else if (item.verifiedStatus === "verified") {
                                return (
                                    <TabPane tab="verified" key="verified" className="tabs">
                                        <AdminCard key={item._id} item={item} />;
                                    </TabPane>
                                );
                            } else {
                                return (
                                    <TabPane tab="rejected" key="rejected" className="tabs">
                                        <AdminCard key={item._id} item={item} />;
                                    </TabPane>
                                );
                            }
                        })}
                    </Tabs>
                    ;
                </DashboardWrapper>