Почему этот класс HOC не возвращает визуализированный дочерний компонент в React?

Question

У меня есть следующий код, который оборачивает функцию для предоставления контекста дочерним компонентам, однако, когда я пытаюсь отобразить это, он терпит неудачу, мой обернутый компонент не рендерит, в React 16.6.3

import React from 'react'

export const WishlistContext = React.createContext(null)


const AddToWishListButtonWrapper = (WrappedComponent) => {
  return class WishlistButton extends React.Component {
    state = {token: null, wishlistItems: []}
    render() {
      const {token, wishlistItems} = this.state
      return (
        <WishlistContext.Provider value={wishlistItems}>
          <WrappedComponent {...this.props} />
        </WishlistContext.Provider>
      )
    }
  }
}

export default AddToWishListButtonWrapper

Тогда в моем другом компоненте это выглядит так:

import AddToWishListButtonWrapper from 'src/components/wishlist_button'

...

      <AddToWishListButtonWrapper>
        <WishlistButton>
          {'   '}{wishlistSuccess ? 'Added!' : 'Add to Wishlist'}
        </WishlistButton>
      </AddToWishListButtonWrapper>

Однако это ничего не рендерит, если я сделаю следующее изменение в нижнем регистре с моимимпорт в мой компонент и мой JSX, обернутый компонент рендерится, в то время как ни один из методов жизненного цикла не запущен, что вызывает недоумение.

import addToWishListButtonWrapper from 'src/components/wishlist_button'

          <addToWishListButtonWrapper>
            <WishlistButton>
              {'   '}{wishlistSuccess ? 'Added!' : 'Add to Wishlist'}
            </WishlistButton>
          </addToWishListButtonWrapper>

Answer 1

HOC AddToWishListButtonWrapper - это функция JavaScript.Он ожидает, что вы вызовете его как функцию и предоставите компонент в качестве аргумента

Вам нужно использовать его примерно так (я сделал случай AddToWishListButtonWrapper маленьким, поскольку это соглашение) -

const EnhancedWishList = addToWishListButtonWrapper(WishlistButton)

А затем сделать это так -

<EnhancedWishList />

Answer 2

Вы можете использовать HOC следующим образом:

class WishlistButton extends Component{
  -- component logic
}

export default AddToWishListButtonWrapper(WishlistButton); 

Answer 3

Вы неправильно используете HOC. Вам необходимо создать экземпляр компонента, например

import React from 'react'

export const WishlistContext = React.createContext(null)


const AddToWishListButtonWrapper = (WrappedComponent) => {
  return class WishlistButton extends React.Component {
    state = {token: null, wishlistItems: []}
    render() {
      const {token, wishlistItems} = this.state
      return (
        <WishlistContext.Provider value={wishlistItems}>
          <WrappedComponent {...this.props} />
        </WishlistContext.Provider>
      )
    }
  }
}

export default AddToWishListButtonWrapper

---

const MyComp = () => (
   <WishlistButton>
        {'   '}{wishlistSuccess ? 'Added!' : 'Add to Wishlist'}
   </WishlistButton>
)
const WrapComponent = AddToWishListButtonWrapper(MyComp)

и визуализировать как

<WrapComponent />

или вместо HOC вы можете использовать render props pattern как

import React from 'react'

export const WishlistContext = React.createContext(null)


const AddToWishListButtonWrapper = (WrappedComponent) => {
  return class WishlistButton extends React.Component {
    state = {token: null, wishlistItems: []}
    render() {
      const {token, wishlistItems} = this.state
      const { children } = this.props;
      return (
        <WishlistContext.Provider value={wishlistItems}>
          {children()}
        </WishlistContext.Provider>
      )
    }
  }
}

export default AddToWishListButtonWrapper

---

<AddToWishListButtonWrapper>
     {() => (
        <WishlistButton>
          {'   '}{wishlistSuccess ? 'Added!' : 'Add to Wishlist'}
        </WishlistButton>
     )}
</AddToWishListButtonWrapper>