Как правильно написать HOC компонент на ReactJS?

Question

[Алексей Костюхин]

Изучаю паттерны React, прохожу тему с HOC(компоненты высшего порядка).
Имеется код "Преподавателя" выглядит так:

spoiler

const with-BookStore-Service = () => (wraped) => {
  return (props) {
    return (
      <Consumer>
        {
          (value) => {
            return (
              <Wraped {...props}
            )
          }
        }
      <Consumer>
    )
  }

Почему мы передаем наш "главный" компонент во вторую функцию

with-BookStore-Service = () => (wraped) =>

Можно сделать короче:

spoiler

const withTest = (wraped) => (props) => {
 return (
      <Consumer>
        {
          (value) => {
            return (
              <Wraped {...props}>
            )
          }
        }
      <Consumer>
)
}

Чем же мой код хуже?
Все работает и компоненты хорошо оборачиваются, мой компонент HOC выполняет свою задачу на ура.

Answer 1

[Robur]

() => (wraped)

Это будет иметь смысл если в первых скобочках будут какие-то параметры.
То есть вы можете сделать функцию которая будет как-то сконфигурирована, которую можно вызывать передавая wraped.
например

const withBookStoreService = (consProps) => (wraped) => {
  return (props) {
    return (
      <Consumer ...consProps>
        {
          (value) => {
            return (
              <Wraped {...props}
            )
          }
        }
      <Consumer>
    )
  }

Тогда вы можете сделать

const hoc1 = withBookStoreService(props)
const hoc2 = withBookStoreService(otherProps)

const wrappedInHoc1 = hoc1(component)
const wrappedInHoc2 = hoc2(component)

Скорее всего в оригинале это так и было, потом просто упростили до потери смысла. В таком виде как вы привели это конечно излишняя конструкция.

так же можно написать () =>() =>() => (wrapper)

Comments

[Алексей Костюхин]

Спасибо, о чем-то подобном догадывался, но вы довели до меня истину. Еще вопрос по ходу
Как HOC получает props?
В какую функцию он их передает и как правильно передавать props?
Приведу пример для иллюстрации :

spoiler

import withBookStoreService from './services'

const App = ({user}) => {
 return (
  <div>
  <h2>hello {user}</h2<
  </div> 
)
}
export default withBookStoreService(App)

Какая именно функция withBookStoreService получит наши пропсы? и почему именно "она"

[Robur]

Алексей Костюхин, она - никак, она выполняется в последней строчке и завершает свою работу.
в экспорт уходит функция которая вернулась из withBookStoreService
Что у вас там я не знаю, но можете просто мысленно подставить в export default то что стоит в return в withBookStoreService