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

Question

我有一个使用Material UI并带有如下所示组件（我们可以将其称为DatePicker的React应用程序，为演示目的偷偷更改了它。

Material 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>);
};

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