У меня есть приложение React, использующее пользовательский интерфейс материалов с компонентом (который мы можем назвать DatePicker
), показанным ниже, хитро измененным для демонстрационных целей.
Материал интерфейса анимирует клики и другие взаимодействия с его компонентами. При щелчке переключателя, который уже был выбран, или «кнопки времени», которая не меняет состояние, эта анимация отображается выше. Однако, когда такой щелчок меняет состояние, анимация прерывается.
Я понимаю, почему это происходит с технической точки зрения; 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>);
};
Я не уверен, как лучше всего поступать в этой ситуации, но у меня возникает отчетливое ощущение, что это не так. У кого-нибудь есть совет? Заранее спасибо!