Question

假设我有一个Tooltip组件，它根据是否有文本数据来显示和隐藏：

{this.state.tooltipText && (
  <Tooltip
    text={this.state.tooltipText} />
)}

如果我想移入和移出该组件，则可以改用布尔on道具，让该组件自行管理移出。

<Tooltip
  on={this.state.tooltipText !== null}
  text={this.state.tooltipText} />

但是，使用此设置，我应该在过渡开始时丢失text道具。显然，从来没有on是false的状态，而我仍然可以使用text道具。

有没有解决这种情况的好方法？

该组件是否应保留tooltipText先前状态的内部记录？
或者最好是使用两个属性来跟踪工具提示的状态（tooltipOn和tooltipText），而不要擦除this.state.tooltipText？

Answer 1

组件是否应保留tooltipText先前状态的内部记录？

是的。否则，父母将不得不决定过渡何时开始/结束，这不是他的权限。

实际上，upstream/develop最适合此操作，因为您可以访问当前和下一个道具：

componentWillReceiveProps

然后父母只有：

 componentWillReceiveProps(nextProps) {
  if(this.props.text && !nextProps.text) {
    this.fadeOut();
  } else if(!this.props.text && nextProps.text) {
    this.setState({ text: nextProps.text });
    this.fadeIn();
  }
}

在卸载之前已经失去需要显示的props数据的动画React组件？

1 个答案: