时间戳

首页 > 解决方案 > 隐藏/删除反应js中的组件

reactjs - 隐藏/删除反应js中的组件

问题描述

我是 React 的新手。所以我需要知道如何隐藏或删除组件。我有一个主页，其中有徽标按钮和菜单按钮之类的按钮。我单击菜单按钮，它会加载一个菜单组件。我已经按州做了。当我单击菜单按钮时，我 setState变为 true 。它转到菜单组件。但是当我单击徽标按钮时，它仍然在 Home 组件上方显示 Menu 组件。徽标按钮来自标题组件。因此，我只想在单击菜单按钮时显示菜单组件，并在移动到其他页面或单击任何其他按钮时隐藏或删除组件。我怎样才能实现它？

标签： reactjsreact-redux

解决方案

You can conditionally render a component based on props:

<Component logged={value} />

//value will be the state value

if (logged) //state as prop {
    return <UserGreeting />;
  }
  return <GuestGreeting />;

(from https://reactjs.org/docs/conditional-rendering.html)

or add style to a component and conditionally set the display property with ternary operator:

<Component logged={value} style={{display: logged ? 'block' : 'none'}}/>

推荐阅读