Реагирует на нормализацию реквизита или вычисляемое свойство

Question

В компоненте DatePicker я хочу работать с другой проверенной версией опоры. Например, средство выбора даты с ranges prop и maxDate prop

<DateRangePicker ranges={ranges} maxDate={new Date} />

range - это массив пар: [ [startDate, endDate], ...]

Если у диапазона endDate больше, чем заданное maxDate, мне нужно взять минимум из двух. Поэтому мне нужно работать с другой (компьютерной) версией реквизита ranges.

Я могу обработать эту логику в конструкторе компонента (то есть создать другую нормализованную переменную ranges), но тогда, если родительский компонент изменит пропел диапазонов, компонент datepicker не будет обновлен.

Как правильно реагировать на это? Поскольку нет возможности изменить саму опору, мне нужна вычисленная нормализованная версия, которая будет привязана к оригиналу.

Answer 1

Как вы просили ,

Я все еще хочу знать, как сам компонент может нормализовать свои реквизиты

Вот как вы можете проверить / вычислить новую дату окончания в пределах DateRangePicker.

---

Вы можете использовать getDerivedStateFromProps , чтобы «вычислить» дату окончания каждого диапазона.

class DateRangePicker extends Component {
  state = { ranges: [] };

  static getDerivedStateFromProps(nextProps, prevState) {
    const ranges = DateRangePicker.getRangesWithinBoundary(nextProps);
    return { ...nextProps, ranges };
  }

  static getRangesWithinBoundary({ ranges, maxDate }) {
    return ranges.map(([startDate, endDate]) => [
      startDate,
      new Date(Math.min.call(null, endDate, maxDate))
    ]);
  }

  render() {
    ...
  }
}

Что происходит,

1. DateRangePicker получает новую опору и getDerivedStateFromProps называется
2. getDerivedStateFromProps вычисляет новое состояние для применения.
3. render использует вычисленный диапазон дат для отображения

⚠ Обратите внимание, что getRangesWithinBoundary является вспомогательным методом для вычисления дат окончания не части React .

Код в действии

Вы можете видеть, что endDate для каждого диапазона ограничено maxDate из 8/1/2018.

Рабочая демоверсия

Answer 2

Вы можете легко сделать это встроенным при передаче реквизита компоненту,

<DateRangePicker ranges = {ranges.map(item=>([item[0], item[1] > maxDate ? maxDate : item[1]]))} maxDate={maxDate} />