如何根据 If 条件的结果渲染 React 组件？

Question

有什么简单的方法可以根据 if 条件的结果将 React 组件渲染到 App.js 中？我有一个时钟应用程序，当我定义的闹钟值等于当前时间时，它应该 'ring'。这个 'ring' 效果我想成为另一个组件，例如 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 />
    }
  }
}

然后，简单地在 App.js 的 Return() 中渲染该变量，就像这样。

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

但是它不起作用，什么都没有呈现。

我试图查看官方 React 文档，他们提供的示例很少，但我并不知道如何在我的案例中实施该方法。如果满足该条件，我不知道如何呈现该组件。有人可以帮我吗？我会很感激的。谢谢。

Link for codesandbox : 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() 函数更新为 return <Ring /> 如果它准备好了，否则 return 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() 将不再 return 任何 JSX 并且只调用 setShowRing(true) 然后你会：

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

即

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

在任何你想删除 <Ring /> 的地方，你都可以调用 setShowRing(false)

如何根据 If 条件的结果渲染 React 组件？

How to render React Component depending on result of If condition?

javascript

dom

reactjs

react-component