javascript - React Prop 规范化或计算属性

Question

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

的日期选择器

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

ranges 是一对数组:[ [startDate, endDate], ...]

如果范围的结束日期大于给定的 maxDate，我需要取两者中的最小值。所以我需要使用不同的(计算的)版本的 ranges Prop 。

我可以在组件构造函数中处理这个逻辑(即创建另一个规范化的 ranges 变量)，但是如果父组件将更改 ranges 属性，则 datepicker 组件将不会更新。

在 React 中处理这个问题的正确方法是什么？由于没有修改 Prop 本身的选项，我需要一个将绑定(bind)到原始 Prop 的计算规范化版本。

Answer 1

如你requested ,

I still want to know how the component itself can normalize its props

下面是如何在 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 收到一个新的 prop 并调用 getDerivedStateFromProps
2. getDerivedStateFromProps 计算要应用的新状态。
3. render 使用计算出的日期范围来显示

⚠ 请注意，getRangesWithinBoundary 是计算结束日期的辅助方法，不是 React 的一部分。

实际代码

您可以看到每个范围的 endDate 上限为 8/1/2018 的 maxDate。

工作演示