React子组件在重新渲染后会丢失动画

Question

我有一个使用Material UI的React应用程序，其组件如下所示（我们可以将其称为DatePicker），出于演示目的而进行了改动。

材料UI为其组件的点击和其他交互提供动画效果。单击已选择的单选按钮或不更改状态的“时间按钮”时，此动画在上方可见。但是，当这种单击更改状态时，动画将被中断。

我可以从技术角度了解为什么会发生这种情况； DatePicker组件调用setMinutes，这是从其父级（状态所在的州）传入的属性。这是一个React.useState变量，然后更新其相应的minutes变量。然后将分钟传递到DatePicker中，由于更改了道具而重新渲染。

如果状态居于DatePicker之内，则此问题不应引起关注；但是，DatePicker是更大形式的一部分，该形式决定了父级表的内容。要为此表生成行，父级必须具有此信息。

以下是父级的示例重构：

const Parent = () => {
    const [minutes, setMinutes] = React.useState(15);
    const [radioOption, setRadioOption] = React.useState('Thank You');
    // Many other state variables here to hold other filter information

    return (<div>
        <DatePicker minutes={minutes} setMinutes={setMinutes} radioOption={radioOption} setRadioOption={setRadioOption}/>
    </div>);
};

这里是DatePicker的示例重构：

const DatePicker: React.FC<DatePickerProps> = props => {
    const {minutes, setMinutes, radioOption, setRadioOption} = props;
    return (<div>
        <Radios value={radioOption} onChange={val => setRadioOption(val)}/>
        <Minutes value={minutes} onChange{val => setMinutes(val)}/>
    </div>);
};

我不确定在这种情况下的最佳做法是什么，但是我有一种明显的感觉，那就是不是。有人有建议吗？预先感谢！

Answer 1

谢谢您的评论，瑞安·科格斯维尔（Ryan Cogswell）。我确实创建了一个代码沙箱，发现问题根本不像我在问题中提供的那样。

我使用withStyles HOC来包装我的组件，其方式类似于const StyledDatePicker = withStyles(styles)(DatePicker)。然后，我使用该样式化的元素，并在其上放置属性（minutes等）。

事实证明，使用无样式的DatePicker可解决此问题。我对此进行了进一步的故障排除，发现我已经在父级的“渲染”方法中创建了“样式化”组件，这意味着每次将道具更改推上链时，父级都会重新渲染，整个“样式化”组件类型将再次创建（或者我相信）。这将破坏参考完整性，从而解释“删除并重新创建”的行为。

这教了宝贵的一课，即保持组件较小并使用代码沙箱进行故障排除。再次感谢！

对于有兴趣的人，这里是用于测试的Code Sandbox。