反应外部库的 willReceiveProps 解决方法

Question

我正在使用可以找到的 React 日期选择器组件 here。该组件非常棒，除了似乎是一个疏忽：它没有实现 willReceiveProps.

为了说明，我创建了如下的datpicker：

<DateField
  dateFormat= { dateFormat}
  forceValidDate={true}
  defaultValue={startDate || ''}
  onChange={this.handleChange.bind(null, 'start_date')}
  id="start"
>
  <DatePicker
    navigation={true}
    locale="en"
    forceValidDate={true}
    highlightWeekends={true}
    highlightToday={true}
    weekNumbers={true}
    weekStartDay={0}
  />
</DateField>

注意上面有一个道具defaultValue，我通过了startDate。现在，startDate 可以并且确实会因为组件外部的原因而发生变化。按照惯例，该值在新的 render() 操作期间传递。根据 React 哲学，这应该不是问题。

然而，在我看来，defaultValue 中的值似乎只在 DateField 中被读取过一次。它被读作 this.props.defaultValue。任何曾经依赖 props 构建组件的人都应该很快意识到这是一个问题。这意味着当 prop 改变时，新值将不会被使用。

因为这是一个库，所以我不能简单地实现 willReceiveProps。有谁知道一个好的解决方法可以让这个组件完全重置 render 或其他一些策略来处理似乎是一个大设计问题？

Answer 1

它们遵循与 <input> 组件相同的标准。 defaultValue 只读一次，但也有 value 可以在外部设置。他们不需要使用 willReceiveProps.

简而言之，使用 value 而不是 defaultValue。

见Uncontrolled Components in React

PS：我仔细研究了代码，似乎除了 value 之外还有属性 text 和 date。由于代码（和文档）已从 github 中删除，我不会检查这些道具之间的区别。

反应外部库的 willReceiveProps 解决方法

react willReceiveProps workaround for external library

render

web-component

reactjs