如何使用三元運算符使用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 />}
        </>
    );
}