如何根据反应弹簧的结果显示和动画反应元件？

Question

我是挣扎在渲染反应组件取决于结果的条件。更准确地说，我正在研究闹钟应用程序，在那里你可以设定闹钟应该“响”的时间。

有3个函数每秒钟通过useEffect()更新一次。

1. currentTime() -gets当前时间和插入处于状态 函数currentTime(){让时间=新日期().toLocaleTimeString(‘IT-IT’)；让小时= time.substr(0,2)；让分钟= time.substr(3,2)；让秒=time.substring(时间.长度-2) setTime(prevState => ({ ...prevState，currentHour: new，currentMinute:new，currentSecond:秒})]}
2. currentDate() -gets当前日期和插入处于状态 函数currentDate(){ let date =新日期()；let day = daysdate.getDay()；setTime(prevState => ({ ...prevState，currentDay:day })) }
3. 如果checkTime() alarmHours状态为空，则为 -checks。只有在设置警报时，此状态才有值。 函数checkTime(){ if(time.alarmHours & time.alarmMinutes){ if(time.currentHour === time.alarmHours & time.currentMinute === time.alarmMinutes && time.currentSecond === '00'){ setShowRing(True)}}

要设置警报，您必须单击设置警报按钮，这是目前，位于右上角。单击之后，就会出现Alarm.js组件，当您完成之后，它就会逐渐消失。这些转换是使用.完成的。

向这个Alarm.js组件传递函数作为App.js的支柱。该函数应该从Alarm.js (报警消息和报警时间消息)获取所有已填充的信息，并将它们存储在状态中。

function getAlarm(){
 let description = document.getElementById('text').value;
 let hours = document.getElementById('hours').value;
 let minutes = document.getElementById('minutes').value;

 setTime(prevState => ({
    ...prevState,
    message:description,
    alarmHours:hours,
    alarmMinutes:minutes,
 }));
}

在我的前一个问题中，我问如何调用这个环组件，当满足条件，当前时间等于时间设置。我被告知要这么做：

const [showRing,setShowRing] = useState(false);

那么当满足checkTime条件时

setShowRing(true);

在App.js渲染中：

{showRing && <Ring message={time.message} turnOff={()=>setShowRing(false)} />}

它起作用了。但是没有转换，如果它在自己的文件中完全分离，就会更高兴，就像Alarm.js一样。我试着给它添加转换，但是它甚至没有显示。最好的选择是在条件下像Alarm.js一样调用它，所有这些转换都在它自己的文件中完成。我是说

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

但不起作用。即使我尝试将这些转换添加到Ring.js中。有人能帮我吗？我会很感激的。

CODESANDBOX 这里.

Answer 1

这里有些绑定，因为如果在App中有条件地呈现组件，则在卸载组件时，Ring中保留的转换将没有足够的时间完成。要么转换逻辑必须驻留在App中，要么您必须像已经使用Alarm那样持久地呈现Ring。它还需要通过道具绑定到showRing状态--它不能控制自己的状态，因为它依赖于父状态。

我建议像这样持续地呈现Ring组件：

<Ring message={time.message} showRing={showRing} turnOff={() => setShowRing(false)} />

在里面：

function Ring(props) {
  const { message, turnOff, showRing } = props;
  const ringTransitions = useTransition(showRing, null, {
    from: { position: "absolute", opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 }
  });

  return (
    <div>
      {ringTransitions.map(
        ({ item, key, props }) =>
          item && (
            <animated.div key={key} style={props} className="overlay">
              <div className="inputBox">
                <h3>{message}</h3>
                <a onClick={turnOff}>TURN OFF</a>
              </div>
            </animated.div>
          )
      )}
    </div>
  );
}