Компонент-переключатель — это React компонент, который условно отображает один из нескольких разных компонентов в зависимости от значения пропса. Он работает как маршрутизатор или диспетчер, который определяет, какой компонент показывать.
Основной подход использует объект-маппер для связи значений пропсов с соответствующими компонентами:
const PAGES = {
home: HomePage,
about: AboutPage,
services: ServicesPage,
contact: ContactPage
}
Компонент-переключатель достаёт нужный компонент из маппера и отображает его:
const Page = (props) => {
const Handler = PAGES[props.page] || ContactPage
return <Handler {...props} />
}
Ключевые моменты:
Handler хранит выбранный компонент|| задаёт запасной компонент (ContactPage), если совпадение не найдено{...props}Используй PropTypes, чтобы проверить значение пропса во время разработки:
Page.propTypes = {
page: PropTypes.oneOf(Object.keys(PAGES)).isRequired
}
Это гарантирует, что передаются только допустимые имена страниц, и ошибки отлавливаются на ранней стадии разработки.
Компоненты-переключатели идеально подходят для:
Этот паттерн даёт чистый и удобный способ управлять несколькими условными отображениями без вложенных if-операторов или тернарных операторов.
Switching component использует объектную карту для связи значений props с соответствующими компонентами, избегая необходимости в вложенной условной логике.
Новый — ещё не проверен сообществом
Вы