反应道具规范化或计算属性

Question

在日期选择器组件中，我想使用另一个经过验证的道具版本。 例如，带有ranges属性的日期选择器和maxDate属性的日期选择器

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

ranges是一个成对的数组：[ [startDate, endDate], ...]

如果范围的endDate大于给定的maxDate，则我需要取两者中的最小值。因此，我需要使用ranges道具的另一个（计算）版本。

我可以在组件构造函数中处理此逻辑（即创建另一个标准化的ranges变量），但是如果父组件将更改prop的范围，则datepicker组件将不会更新。

在反应中处理此问题的正确方法是什么？由于没有选择修改道具本身的选项，因此我需要一个计算后的规范化版本，该版本将绑定到原始版本。

Answer 1

您requested时

  

我仍然想知道组件本身如何规范其道具

在这里，您可以在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的{​​{1}}为上限。

工作演示

Answer 2

将prop传递到组件时，您可以轻松地内联完成

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