В какую папку класть общие функции, которые экспортирую для импорта в различные компоненты?

Question

[Артём]

В проекте есть папки под каждый компонент, где в каждом свои файлы под стили и свой jsx, но внутри этого jsx-a только код для своего компонента.
У меня например есть такая функция, она рендерит мне линки, использую ее в разных компонентах.
В какую папочку обычно помещают такие функции?)) Если какое-нибудь стандартизированное название или место. Имеется ещё некоторое количество функций, которые тоже используются в нескольких компонентах. Или лучше в каждом компоненте оставлять свою такую, чтобы компонент был независимым, его можно было вытащить, вставить в другое место и все работало?)

renderLinks(links) {
    return links.map((link,index) => {
      return (
        <li key={index}>
         <NavLink 
          to={link.to} 
          exact={link.exact}       
          onClick={this.clickHandler}
        >
          {link.label}
        </NavLink>
        </li>
      )
    })
  }

Comments

[Alex]

common

Answer 1

[Руслан Золотарёв]

Это извечная тема для дискуссий. Стандартизация - настолько размытое понятие, что оно просто игнорируется и все "стандартизируют" код по-своему) В команде это часто зависит от предпочтений тим лида. Выносите так, как вам удобно - важно чтобы вы думали. Вы правильно делаете, что выделяете абстракцию. Например, эту функцию можно вынести просто как рендер списков, не привязывайте её к компонентам. Назовите папку src/utils.

В каждой команде, выделяют абстракции по-своему, поэтому если вы вообще понимаете что выделять абстракции нужно, то чего вам стоит сейчас вынести в src/utils, а потом, если вашей команде не понравится, вынести куда-то ещё - смысл тот же.

Answer 2

[Егор Живагин]

Если у некоторых ваших компонентов много одинаковых методов, вы можете посмотреть в сторону HOC