在卸载丢失需要显示的道具数据的 React 组件之前对 React 组件进行动画处理?

Question

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

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

如果我想转换这个组件，我可能会包含一个布尔onprop，让组件管理转换本身。

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

但是，通过此设置，当过渡开始时，我会丢失text道具。很明显，从来没有一个状态是onfalse，我仍然可以使用text道具。

有没有处理这种情况的好方法？

• 组件是否应该保留以前tooltipText状态的内部记录？
• 还是最好使用两个属性来跟踪工具提示的状态(tooltipOn和tooltipText(，并且永远不要擦除this.state.tooltipText？

Answer 1

组件是否应该保留工具提示文本先前状态的内部记录？

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

实际上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();
}
}

那么父母只有：

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