IT技术 - React 子组件在重新渲染时失去动画 - 吾爱随笔录

我有一个 React 应用程序，它使用 Material UI 和DatePicker如下所示的组件（我们可以称之为），为了演示目的偷偷地改变了。

Material UI 为其组件的点击和其他交互设置动画。当点击一个已经被选中的单选按钮，或者一个不会改变状态的“时间按钮”时，这个动画在上面是可见的。然而，当这样的点击改变状态时，动画会被中断。

我可以从技术角度理解为什么会发生这种情况；所述DatePicker组件的调用setMinutes，这是从它的父传入一个属性（的状态生活在哪里）。这是一个React.useState变量，然后更新其相应的minutes变量。然后将 Minutes 传递给DatePicker，由于props更改而重新渲染。

如果国家生活在其中，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>);
};

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