Question

因此，我在Symfony中实现了这一特定的javascript函数，现在，我不得不通过将数据从Symfony后端发送到React App来在React-Redux中重做所有这些操作。可悲的是，我还是React的初学者，我无法使其正常工作。

这是我的详细问题：我有一个列表，显示所有停在停车场的汽车，每辆汽车都有一个日期时间值，用于显示该车何时停放，另一个整数值，用于显示该车要停放多少分钟。

我的函数采用datetime值，将其转换为UTC并为其添加整数值分，所以它给了我汽车必须离开停车场的时间。

然后，它使当前时间成为另一个值：并执行以下功能：endingtime-currentTime。

所以我得到了所有汽车的清单，每辆汽车前面都有倒计时。

正如我所说，现在我必须将此功能集成到React-Redux中：

这是我的PHP代码：我会在实体类本身中计算失效时间

    public function getExpiresAt()
    {
      $parkedAt= $this->getParkedAt();
      $expires = clone $parkedAt;
      $expires->modify('+' . $this->getTime() . ' min');

      return $expires->format('U');
    }

此后，我创建了一个在细枝中带有该值的跨度

    <td>
     <span class="timer" data-expires="{{ car.getExpiresAt() }}"></span>
    </td>

并使用此功能创建倒计时：

<script>
    var timers = document.querySelectorAll('.timer')

    function updateTimers () {

      var rightNow = Math.floor((Date.now()/1000)+3600) // in seconds
      timers.forEach(function (timer) {
        var expires = parseInt(timer.dataset.expires) // in seconds

        if (rightNow > expires) {
                    timer.innerText ='expired'

       } else {
          //  console.log('expires',expires,'rightNow',rightNow);
          var seconds = expires - rightNow
          var minutes = Math.floor(seconds/60)
          var hours = Math.floor(minutes/60)
          var days = Math.floor(hours/24)
          seconds = ('0' + String(seconds%60)).slice(-2)
          minutes = ('0' + String(minutes%60)).slice(-2)
          hours = ('0' + String(hours%24)).slice(-2)
          timer.innerText = days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's'

        }

      })

      setTimeout(function () {
        updateTimers()
      }, 100)

    }

    updateTimers()
  </script>

最后这是我的React App中的carList.js：

import React from 'react';
import {Message} from "./Message";
import {Spinner} from "./Spinner";

export class CarList extends React.Component {
    render() {
        const {carList}=this.props;
        console.log(carList);


        if (null === carList){
        return (<Message message="No cars"/>); 
        }

        return (

            <div className="card mb-3 mt-3 shadow-sm">
                { carList.map(car => {
                    return (

                            <div className="card-body border-bottom" key={car.id}>
                                <p className="card-text mb-0">
                                    {car.number}
                                </p>
                                <p className="card-text">
                                    <small className="text-muted">{car.parkedAt}</small>
                                </p>

                                <p>
                                    <span className="timer"></span>
                                </p>
                            </div>

                    );


                })}
            </div>
        )
    }



}

Answer 1

我可以假设您会在car.expires中提供汽车的停留时间

因此，您应该在react render中计算到期倒计时：

flock

然后，您将在我们的CarList类中声明此getExirationTime方法。另外，您使用两种react方法（componentDidMount / componentDidUpdate）通过重新渲染此组件来计划下一次timeres更新。

{carList.map(car => {
    return (
        <div className="card-body border-bottom" key={car.id}>
            .....
            <p className="card-text">
                <small className="text-muted">Experies in: {this.getExirationTime(car.expires)}</small>
            </p>

            ....
        </div>
    );
})}

仅此而已。如果有汽车，此组件将每秒更新一次。

React-Redux中的倒数计时器功能

1 个答案: