Как можно зарефакторить данный код?

Question

[Alexander]

export const Leftbar = () => {
  const [isOpen, setIsOpen] = React.useState<'kids' | 'women' | 'men' | undefined>()
  const onMouseKidsEnter = () => {
    setIsOpen('kids')
  }

  const onMouseWomenEnter = () => {
    setIsOpen('women')
  }

  const onMouseMenEnter = () => {
    setIsOpen('men')
  }

  const onMouseLeave = () => {
    setIsOpen(undefined)
  }

  return (
    <React.Fragment>
      <LeftBar>
        <LeftBarItem onMouseEnter={onMouseKidsEnter} onMouseLeave={onMouseLeave} isOpen={isOpen === 'kids'}>
          <span>Kids</span>
          <IoIosArrowBack />
        </LeftBarItem>
        <LeftBarItem onMouseEnter={onMouseWomenEnter} onMouseLeave={onMouseLeave} isOpen={isOpen === 'women'}>
          <span>Women</span>
          <IoIosArrowBack />
        </LeftBarItem>
        <LeftBarItem onMouseEnter={onMouseMenEnter} onMouseLeave={onMouseLeave} isOpen={isOpen === 'men'}>
          <span>Men</span>
          <IoIosArrowBack />
        </LeftBarItem>
      </LeftBar>

      <LeftbarDropdown
        activeMenu={isOpen === 'kids'}
        arrLinks={KidsLinks}
        onMouseEnter={onMouseKidsEnter}
        onMouseLeave={onMouseLeave}
        dropdownImg={dropdownKidsBg}
      />
      <LeftbarDropdown
        activeMenu={isOpen === 'women'}
        arrLinks={WomenLinks}
        onMouseEnter={onMouseWomenEnter}
        onMouseLeave={onMouseLeave}
        dropdownImg={dropdownWomenBg}
      />
      <LeftbarDropdown
        activeMenu={isOpen === 'men'}
        arrLinks={MenLinks}
        onMouseEnter={onMouseMenEnter}
        onMouseLeave={onMouseLeave}
        dropdownImg={dropdownMenBg}
      />
    </React.Fragment>
  )
}

interface LeftbarDropdownProps {
  activeMenu: boolean | undefined
  arrLinks: Array<HeroLinks>
  onMouseLeave: () => void
  onMouseEnter: () => void
  dropdownImg: string
}

const LeftbarDropdown: React.FC<LeftbarDropdownProps> = ({
  activeMenu,
  onMouseEnter,
  onMouseLeave,
  arrLinks,
  dropdownImg,
}): ReactElement => {
  return (
    <CSSTransition in={activeMenu} unmountOnExit timeout={500} classNames='dropdown'>
      <DropdownMenu onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} dropdownImg={dropdownImg}>
        {arrLinks.map((item, inx) => {
          return (
            <DropdownMenuLi>
              <DropdownMenuLink key={`dropdown-link-${inx}`} to={`${item.path}`}>
                {item.title}
              </DropdownMenuLink>
            </DropdownMenuLi>
          )
        })}
      </DropdownMenu>
    </CSSTransition>
  )
}

Comments

[Gary_Ihar]

Зачем? Ведь он невероятно понятный))

[Илья Герасимов]

https://ru.reactjs.org/docs/hooks-reference.html#u...
для начала

Answer 1

[n1ksON]

- const onMouseKidsEnter = () => {
-    setIsOpen('kids')
-  }
-  const onMouseWomenEnter = () => {
-    setIsOpen('women')
-  }
-  const onMouseMenEnter = () => {
-    setIsOpen('men')
-  }
+ const onMouseParamEnter = (param) => {
+  setIsOpen(param);
+ }

<LeftBar>
-       <LeftBarItem onMouseEnter={onMouseKidsEnter} onMouseLeave={onMouseLeave} isOpen={isOpen === 'kids'}>
+ <LeftBarItem onMouseEnter={() => onMouseParamEnter('kids')} onMouseLeave={onMouseLeave} isOpen={isOpen === 'kids'}>
          <span>Kids</span>
          <IoIosArrowBack />
        </LeftBarItem>
-       <LeftBarItem onMouseEnter={onMouseWomenEnter} onMouseLeave={onMouseLeave} isOpen={isOpen === 'women'}>
+ <LeftBarItem onMouseEnter={() => onMouseParamEnter('women')} onMouseLeave={onMouseLeave} isOpen={isOpen === 'women'}>
          <span>Women</span>
          <IoIosArrowBack />
        </LeftBarItem>
-        <LeftBarItem onMouseEnter={onMouseMenEnter} onMouseLeave={onMouseLeave} isOpen={isOpen === 'men'}>
+ <LeftBarItem onMouseEnter={() => onMouseParamEnter('men')} onMouseLeave={onMouseLeave} isOpen={isOpen === 'men'}>
          <span>Men</span>
          <IoIosArrowBack />
        </LeftBarItem>
      </LeftBar>

А ещё лучше, <LeftBarItem> вынести в отдельный компонент и передавать туда нужный props с параметром kids/women/men

Comments

[Alexander]

Может быть?

const category = [
  {
    title: 'Kids',
    activeMenu: 'kids',
    arrLinks: KidsLinks,
    dropdownImg: dropdownKidsBg,
  },
  {
    title: 'Women',
    activeMenu: 'women',
    arrLinks: WomenLinks,
    dropdownImg: dropdownWomenBg,
  },
  {
    title: 'Men',
    activeMenu: 'men',
    arrLinks: MenLinks,
    dropdownImg: dropdownMenBg,
  },
]

export const Leftbar = () => {
  const [isOpen, setIsOpen] = React.useState<string | undefined>()
  const onMouseParamEnter = (param: string) => {
    setIsOpen(param)
  }
  const onMouseLeave = () => {
    setIsOpen(undefined)
  }

  return (
    <React.Fragment>
      <LeftBar>
        {category.map((item, inx) => (
          <LeftBarItem
            key={`dropdown-title${inx}`}
            onMouseEnter={() => onMouseParamEnter(item.activeMenu)}
            onMouseLeave={onMouseLeave}
            isOpen={isOpen === item.activeMenu}
          >
            <span>{item.title}</span>
            <IoIosArrowBack />
          </LeftBarItem>
        ))}
      </LeftBar>

      {category.map((item, inx) => (
        <LeftbarDropdown
          key={`dropdown-${inx}`}
          activeMenu={isOpen === item.activeMenu}
          arrLinks={item.arrLinks}
          onMouseEnter={() => onMouseParamEnter(item.activeMenu)}
          onMouseLeave={onMouseLeave}
          dropdownImg={item.dropdownImg}
        />
      ))}
    </React.Fragment>
  )
}

interface LeftbarDropdownProps {
  activeMenu: boolean | undefined
  arrLinks: Array<HeroLinks>
  onMouseLeave: () => void
  onMouseEnter: () => void
  dropdownImg: string
}

const LeftbarDropdown: React.FC<LeftbarDropdownProps> = ({
  activeMenu,
  onMouseEnter,
  onMouseLeave,
  arrLinks,
  dropdownImg,
}): ReactElement => {
  return (
    <CSSTransition in={activeMenu} unmountOnExit timeout={500} classNames='dropdown'>
      <DropdownMenu onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} dropdownImg={dropdownImg}>
        {arrLinks.map((item, inx) => {
          return (
            <DropdownMenuLi key={`dropdown-link-${inx}`}>
              <DropdownMenuLink to={`${item.path}`}>{item.title}</DropdownMenuLink>
            </DropdownMenuLi>
          )
        })}
      </DropdownMenu>
    </CSSTransition>
  )
}