Как реализовать переключение компонентов по клику на элемент?

Question

[teertsneerg]

По факту хочу сделать следующее:

Есть Sidebar в отдельном компоненте, в зависимости от того, на какой элемент я кликнул в Sidebar'e нужно подгружать разные компоненты в родительском компоненте.

Идея реализации такая: При клике на элемент в Sidebar менять state и в родительском компоненте через switch выводить разные компоненты в зависимости от данного state.

Нормальный ли это вариант реализации, или есть какой-то другой, который использовать предпочтительнее?

P.S. Только начинаю изучение React'a, если что-то не так написал задайте, пожалуйста, уточняющие вопросы.

Answer 1

[Andrew Ghostuhin]

Нормальное решение - если оно решает твою задачу. Всякие бест-практики и прочие штуки уже для тех кто начинает ощущать нехватку знаний спустя год-другой.

Примерно так

const TopNavigation: FC = () => {
  const { opened, setOpened } = useData()
  const { state: cityState } = useCityState()
  const { dispatch } = useNavigationDispatch()
  const { state: navigationState } = useNavigationState()
  const navRef = useRef(null)

  useEffect(() => {
    dispatch({ type: 'setTopNavHeight', payload: { topNavHeight: navRef.current.offsetHeight } })
  }, [])

  return (
    <Navigation
      size='tiny'
      fixed
      dispatch={dispatch}
      transparent={navigationState.transparent}
      borderBottom='white'
      backgroundColor={navigationState.transparent ? 'transparent' : 'slightlyGray'}
    >
      <Layout justifyContent='center'>
        <Box
          maxWidth={['90%', '90%', '1200px']}
          width='100%'
          height='48px'
          ref={navRef}
          alignSelf='center'
          alignItems='center'
        >
          <CityPinIcon
            color={navigationState.transparent ? 'white' : ''}
            width='10px'
            height='13px'
          />
          <Layout flexBasis='8px' />
          <Text
            fontSize='small'
            lineHeight='normal'
            color={navigationState.transparent ? 'white' : 'dustyGray'}
            cursor='pointer'
            onClick={() => setOpened(true)}
          >
            {cityState.city.name}
          </Text>
          <Layout flexGrow={1} />
          <TopBarList />
        </Box>
      </Layout>
      <CityModal onClose={() => setOpened(false)} opened={opened} />
    </Navigation>
  )
}

export default TopNavigation