Функция для расширения div на время - PullRequest
Новая
       3

Функция для расширения div на время

0 голосов
/ 16 апреля 2020

У меня есть React Component, где я могу вернуть время в секундах в минутах от данных JSON и Момента. js. Вот как я вызываю реквизиты:

const [delayTailData, setDelayTailData] = useState(props.data);

Когда я делаю это, данные отображаются в минутах в div.

Из JSON файла: "delay": 900, В компоненте: 15 (мин)

Теперь я хочу изменить состояние useState(initialSize(props.data.delay));, чтобы два класса div .tail & .span увеличивались в размере div по мере увеличения времени задержки.

DelayTailLbl.jsx 

const DelayTailLbl = (props) => {

  const [delayWidth, setDelayWidth] = useState(initialSize(props.data.delay));
  console.log(props, 'delay');


  function initialSize(delay) {
    const originalSize = 50;
    const delayMinutes = parseInt(delay / 60);
    return delayMinutes === 0 ? originalSize : originalSize + delayMinutes;
    }

  return (
    <div>
      <div className={delayWidth > 300  ? style.tail : style.tailWarning}>
        <span className={style.span}>{moment.duration(delayWidth).asMinutes()}</span>

      </div>
    </div>
  );
};
export default DelayTailLbl;

Теперь класс .span div теперь не возвращает время правильно.

Из JSON файла: "delay": 900,
В компоненте: 0.0010833333333333333 (мин)

Я довольно новичок в этом, поэтому я не могу понять, что Я сделал неправильно здесь. Любые идеи о том, как это исправить и, что более важно, эта функция будет работать для расширения div? Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 16 апреля 2020

В соответствии с моментом. js документацией вам необходимо указать длительность в миллисекундах. Ты можешь использовать: moment.duration(delayWidth, 'minutes'); или moment.duration(delayWidth * 60 * 1000);

0 голосов
/ 16 апреля 2020

Вам не нужно показывать все эти десятичные дроби, просто показать до 2 десятичных знаков 

parseInt(delay / 60).toFixed(2)
...