Простой способ раскрыть состояние внутреннего компонента в React
Рассмотрим сценарий, в котором у вас есть компонент DatePicker с его внутренним состоянием, и вы хотите предоставить внешним компонентам возможность доступа к этому состоянию. Этого можно добиться, создав функцию обратного вызова, часто называемую реквизитом, позволяющую внешним компонентам взаимодействовать с DatePicker. Вот пример:
const DatePicker = ({ maxDate = maxDateValue, log = true, consumeDate = () => {} }) => {
const [value, setValue] = React.useState(() => {
consumeDate(new Date()); // Expose the initial value
return new Date();
});
if (log) console.log('Date picker value...', value);
return (
<Container>
<Calendar
value={value}
onChange={(vl) => {
setValue(vl);
consumeDate(vl); // Expose the updated value
}}
minDate={new Date()}
maxDate={maxDate}
/>
</Container>
);
};В этом примере компонент DatePicker предоставляет свойство ConsumerDate, которое внешние компоненты могут использовать для доступа к внутреннему состоянию компонента. Такой подход облегчает обмен состоянием компонента и открывает двери для многочисленных возможностей.
Вот как это работает:
Свойство ConsumerDate передается компоненту DatePicker, который представляет собой функцию, которую можно определить в любом родительском компоненте.
Внутри компонента DatePicker эта функция вызывается во время инициализации и при каждом изменении значения даты. Это позволяет внешним компонентам наблюдать начальные и обновленные значения.
Событие onChange компонента Calendar запускает обновление внутреннего состояния (значения) в DatePicker. Он также вызывает ConsumerDate, предоставляя новое значение.
