Как отрендерить компонент React в зависимости от результата условия If?

Question

Есть ли простой способ визуализировать компонент React в приложении. js, но на основе результата из условия if? У меня есть приложение для часов, которое должно «звонить», когда значение будильника, которое я определяю, равно текущему времени. Я хочу, чтобы этот эффект «кольца» был тем, что другой компонент, например Ring. js, будет отображать, когда текущее время равно времени будильника, и он будет содержать текст из состояния a. Я могу просто отключить его, нажав кнопку.

Вот моя функция с условием, которая вызывается каждую секунду, чтобы проверить, есть ли значение в состоянии alarmHours или нет.

  function checkTime(){
   if(time.alarmHours && time.alarmMinutes){
    if(time.currentHour === time.alarmHours && time.currentMinute === time.alarmMinutes && 
     time.currentSecond === '00'){
      //VALUES ARE EQUAL ,ALARM IS RINGING,RENDER COMPONENT
     }
    }
   }

Моя первая идея состояла в том, чтобы создать пустую переменную, и если условие выполнено, просто вставьте компонент Ring. js в эту переменную.

let ring;

function checkTime(){
  if(time.alarmHours && time.alarmMinutes){
    if(time.currentHour === time.alarmHours && time.currentMinute === time.alarmMinutes && 
    time.currentSecond === '00'){
      ring = <Ring />
    }
  }
}

А затем просто отобразите эту переменную в Return () приложения. js, как это.

Return(
  <div>
    {ring}
  </div>
)

Но это не работает, ничего не отображается.

Я пытался посмотреть официальную документацию React, там есть несколько примеров, но я действительно не понимаю, как реализовать этот подход в моем случае. Я не знаю, как визуализировать этот компонент, если это условие выполнено. Кто-нибудь может мне помочь? Я буду признателен за это. Спасибо.

Ссылка на codeandbox: https://codesandbox.io/s/rough-paper-xv0wi?file= / src / App. js

Answer 1

Я бы обновил вашу функцию checkTime(), чтобы она возвращала <Ring />, если она готова, в противном случае возвращайте null, и тогда вы можете просто:

return (
  <div>
    {checkTime()}
  </div>
);

т.е.

function checkTime(){
  if(time.alarmHours && time.alarmMinutes){
    if(time.currentHour === time.alarmHours && time.currentMinute === time.alarmMinutes && 
    time.currentSecond === '00'){
      return <Ring />
    }
  }

  return null;
}

ring больше не нужен.

РЕДАКТИРОВАТЬ: дополнительный вопрос в комментариях

если вы хотите, чтобы Ring показывал, когда было достигнуто время будильника, я бы изменил шаблон и представил новое логическое значение значение состояния, например const [showRing, setShowRing] = React.useState(false), которое изначально установлено в false. checkTime() больше не будет возвращать JSX, а просто вызовет setShowRing(true), а затем вы:

return (
  <div>
    {showRing && <Ring />}
  </div>
);

ie

function checkTime(){
  if(time.alarmHours && time.alarmMinutes){
    if(time.currentHour === time.alarmHours && time.currentMinute === time.alarmMinutes && 
    time.currentSecond === '00'){
      setShowRing(true);
    }
  }
}

И где бы вы ни захотели удалить <Ring /> звоните setShowRing(false)

Answer 2

Попробуйте следующее:

let ring = <Ring />;

function checkTime(){
  if(time.alarmHours && time.alarmMinutes){
    if(time.currentHour === time.alarmHours && time.currentMinute === time.alarmMinutes && 
    time.currentSecond === '00'){
      return true;
    }
  }
   return false;
}
...

return (
  <div>
   {checktime() ? ring : null}
  </div>
)