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

我有一个React应用程序，它使用MaterialUI和一个组件（我们可以称之为

DatePicker

），如下所示，为了演示目的而偷偷更改

“材质UI”为单击及其组件的其他交互设置动画。单击已选定的单选按钮或不改变状态的“时间按钮”时，此动画在上方可见。但是，当此类单击更改状态时，动画会中断

我可以从技术角度理解为什么会发生这种情况；

DatePicker

组件调用

setMinutes

，这是从其父级（状态所在位置）传入的属性。这是一个

React.useState

变量，然后更新其相应的

minutes

变量。分钟然后被传递到

日期选择器

，由于道具更改，它会重新呈现

如果状态位于日期选择器中，那么这个问题就不会出现；然而，

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

---

我不确定在这种情况下最好的做法是什么，但我有一种明显的感觉，这不是最好的做法。有人有什么建议吗？提前谢谢

感谢您的评论，Ryan Cogswell。我确实创建了一个代码沙盒，发现问题不在于反应状态管理，而在于我在问题中提供的内容之外所做的事情

我使用了包装组件的方法，类似于

constyleddatepicker=withStyles（styles）（DatePicker）

。然后我使用了这个样式化的元素，并在上面添加了属性（

minutes

，等等）

事实证明，使用非样式化的

DatePicker

解决了这个问题。我进一步解决了这个问题，发现我已经在父级的“render”方法中创建了“Styled”组件，这意味着每次将道具更改推上链时，父级都将重新渲染，并且整个“Styled”组件类型将再次创建（或者我相信是这样）。这将破坏引用完整性，这解释了“删除并重新创建”行为

这给我们上了宝贵的一课，让组件保持小型，并使用代码沙盒进行故障排除。再次感谢

---

对于任何感兴趣的人，这里是用于测试的。请提供一个复制您的问题的解决方案。感谢您的跟进。然而，在仍然使用withStyles HOC包装器的情况下，有没有办法解决这个问题？另一个用户遇到了差异问题，但其根本原因相同：

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