如何使用 react 和 javascript 在某些条件为真时显示组件？

Question

The layout component is rendered on all pages.

I want to achieve the following

in /items page
*Layout component is displayed if the user is admin 
* Layout component not displayed if the user is non-admin

below is my code,

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

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

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

As you see from the above code, the Layout component is displayed in all pages and is used as a wrapper for other routes too like for /home

Now I don't want the Layout component to be displayed only in /items page if a user is not admin

What I have tried?

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

}

But this will not display TopBar and BottomBar if the items page even if the user is admin. how can I modify the condition

such that TopBar and BottomBar are displayed in all pages except items page if not admin.

could someone help me with this? thanks. };

Answer 1

What about you change the condition in Route ?

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

Answer 2

If I understand correctly, you might be looking for something along the lines of this:

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

Then you should be able to remove your isAdmin condition in your Main component.

Answer 3

In your layout component you can use conditional rendering. We can check if the page is isItemsPath first, if it is items path and user is not admin then we do not show the Topbar and BottomBar, for all other pages we show them

const Layout: React.FC = ({ children }) => {
    const history = useHistory();
    const isItemsPath = history.location.pathname.includes('/items');
    const isAdmin = getUser();

    return !(isItemsPath && !isAdmin) ? 
        <>
            {children}
        </> : (
        <>
            <TopBar />
                {children}
            <BottomBar />
        </>
    );
}

Answer 4

You have some choice to doing this, but I think the best way is using HOC if you have to repeat checking the user is admin or not, pass your component to HOC and in HOC component check if a user is an admin or not. You can use this HOC component for all of your components. In HOC component use conditional rendering. Something like this:

function checkAdmin(WrappedComponent, selectData) {
    const isAdmin = getUser();
    render() {  
        return ({isAdmin} ? <WrappedComponent  /> : <div></div>)
    }
}