如何根據 If 條件的結果渲染 React 組件？

Question

有什么簡單的方法可以根據 if 條件的結果將 React 組件渲染到 App.js 中嗎？ 我有時鍾應用程序，當我定義的警報值等於當前時間時，它應該“響鈴”。 這個“環”效果我想成為另一個組件，例如 Ring.js 將在當前時間等於警報時間時呈現，它將包含來自 state 的文本，我可以通過單擊按鈕簡單地卸載它。

這是我的 function 條件，每秒調用一次以檢查 alarmHours state 中是否存在值。

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

然后，只需在 App.js 的 Return() 中渲染該變量，就像這樣。

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

但它不起作用，什么都沒有渲染。

我嘗試查看官方 React 文檔，他們的示例很少，但我並沒有真正了解如何在我的案例中實現該方法。 如果滿足該條件，我不知道如何渲染該組件。 有人可以幫我嗎？ 我會很感激的。 謝謝你。

代碼沙盒鏈接： https://codesandbox.io/s/rough-paper-xv0wi?file=/src/App.js

Answer 1

嘗試這個：

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

Answer 2

我會更新你的checkTime() function 以返回<Ring />如果它准備好了，否則返回 null 然后你可以：

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

IE

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在到達鬧鍾時間時顯示，我會更改模式並引入一個新的 boolean state 值，如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)