如何使用三元运算符使用react返回jsx？

Question

如果用户在“/items”页面中，我想隐藏一个组件。

下面是我的代码，

function Main() {
    const isAdmin = getUser();

    return(
        <Switch>
            <Route
                exact
                path="/items"
                render={routeProps => (
                    <Layout>
                        {isAdmin ? <Items {...routeProps} />: <NotFound/>}
                    </Layout>
               )}
            />
            //other Routes
        </Switch>
    );
}


const Layout: React.FC = ({ children }) => (
    <>
        <TopBar />
            {children}
        <BottomBar />
    </>
);

现在，当用户在 /items 页面中时，我不希望显示 TopBar 和 BottomBar。

我该怎么做？ 有人可以帮我吗？ 谢谢。

Answer 1

如下更改您的布局组件：

const Layout: React.FC = ({ children }) => {
    const history = useHistory();
    const isItemsPath = history.location.pathname.includes("/items");
    return (
        <>
            {!isItemsPath && <TopBar />}
                {children}
            {!isItemsPath && <BottomBar />}
        </>
    );
}