反应子组件在重新渲染时丢失动画 [英] React child component loses animation upon re-render

问题描述

我有一个使用Material UI的Reaction应用程序，下面显示了一个组件(我们可以称之为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>);
};

我不确定这种情况下的最佳实践是什么，但我有一种明显的感觉，那不是它。有人有什么建议吗？提前感谢！

推荐答案

感谢您的评论，Ryan Cogswell。我确实创建了一个代码沙箱，并且发现问题与其说是关于反应状态管理，不如说是我正在做的事情超出了我在问题中提供的。

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

事实证明，使用无样式的DatePicker可以解决此问题。我对此进行了进一步的故障排除，发现我已经在父级的"Render"方法中创建了"Styled"组件，这意味着每次在链中向上推入道具更改时，父级都会重新呈现，并且会再次创建整个"Style"组件类型(至少我是这样认为的)。这将破坏引用完整性，这解释了"删除并重新创建"行为。

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

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

这篇关于反应子组件在重新渲染时丢失动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！