2
votes

Pourquoi cette classe HOC ne retournerait-elle pas un composant enfant rendu dans React?

J'ai le code suivant qui encapsule une fonction pour fournir du contexte aux composants enfants, cependant, lorsque j'essaye de rendre ceci, cela échoue, mon composant enveloppé ne rend pas, dans React 16.6.3

import addToWishListButtonWrapper from 'src/components/wishlist_button'

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

reactjs jsx

0 commentaires

3 Réponses :

2
votes

Vous n'utilisez pas correctement le HOC. Vous devez créer une instance du composant comme

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

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

et la rendre comme

<WrapComponent />

ou au lieu de HOC, vous pouvez utiliser le modèle d'accessoires de rendu comme

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

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

2 commentaires

Génial. Merci. Je ne sais pas pourquoi j'ai essayé de le structurer de cette façon, l'élément minuscule, je suppose, fait un élément wrapper html vide, et cela m'a confus.

Heureux d'avoir aidé (y)

0
votes

Le HOC AddToWishListButtonWrapper est une fonction javascript. Il attend de vous que vous l'appeliez en tant que fonction et que vous fournissiez un composant comme argument

Vous devez l'utiliser quelque chose comme ceci (j'ai fait le cas de AddToWishListButtonWrapper petit car c'est la convention) -

<EnhancedWishList />

0 commentaires

0
votes

Vous pouvez utiliser HOC comme suit:

class WishlistButton extends Component{
  -- component logic
}

export default AddToWishListButtonWrapper(WishlistButton);

0 commentaires