主页 / 问题 / 1497136
Accepted
Marie
Asked:2023-02-17 15:28:44 +0000 UTC2023-02-17 15:28:44 +0000 UTC

如何只隐藏页面上的一个组件而不是整个页面 React

  • 772

你能告诉我如何修复代码，以便当你点击按钮时，这个功能所在的整个页面都不会被隐藏吗？

单击按钮时我只需要隐藏组件<Notification /> acomponent1并component2保留，就像它们所在的页面一样

// функции
     
     
 const [hidden, setHidden] = useState(false);
 if (hidden) return null;
     
     <Component1 />
     
     <Notification title="заголовок">
        <Text weight="400" className={styles.text}>
      Текст
        </Text>
        <div className={styles.buttonContainer} >
        <Button className={styles.notificationButton} onClick={() => setHidden(true)}>
          OK!
        </Button>
        </div>
      </Notification>
      
  <Component2 />
reactjs

1 个回答

  1. Best Answer

    为组件的输出添加条件

    {variable && <Component />}

    如果变量为true，则组件将被渲染

    const [hidden, setHidden] = useState(false);

return (
  <Component1 />

{!hidden && <Notification title="заголовок">
  <Text weight="400" className={styles.text}>
    Текст
  </Text>
  <div className={styles.buttonContainer} >
    <Button className={styles.notificationButton} onClick={() => setHidden(true)}>
      OK!
    </Button>
  </div>
</Notification>}

<Component2 />
)

    第二个选项，您可以使用三元运算符有条件地显示一个或另一个组件

    {variable ? (<Component1>) : (<Component2>)}

    在你的代码中它看起来像这样

    return (
  <Component1 />

{!hidden ? (<Notification title="заголовок">
  <Text weight="400" className={styles.text}>
    Текст
  </Text>
  <div className={styles.buttonContainer} >
    <Button className={styles.notificationButton} onClick={() => setHidden(true)}>
      OK!
    </Button>
  </div>
</Notification>) 
: (<div>Нет уведомлений</div>)}

<Component2 />
)
    • 1

相关问题