Как скрыть только 1 компонент на странице, а не всю страницу React

Рейтинг: 1Ответов: 1Опубликовано: 17.02.2023

Скажите, пожалуйста, как исправить код, чтобы при нажатии на кнопку не скрывалась вся страница, на которой находится эта функция?

мне нужно при нажатии на кнопку скрыть ТОЛЬКО компонент <Notification /> а component1 и 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 />
javascript reactjs
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Добавьте условие по выводу компонента

{variable && <Component />}

Если variable будет true, то Component будет отрисован

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 />
  </>
)