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。您需要创建组件的实例，例如

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>

Answer 2

HOC AddToWishListButtonWrapper是一个javascript函数。它希望您将其作为一个函数来调用，并提供一个作为其参数的组件

您需要像这样使用它（按照惯例，我将AddToWishListButtonWrapper的情况设置得很小）-

const EnhancedWishList = addToWishListButtonWrapper(WishlistButton)

然后像这样渲染它-

<EnhancedWishList />

Answer 3

您可以按以下方式使用HOC：

class WishlistButton extends Component{
  -- component logic
}

export default AddToWishListButtonWrapper(WishlistButton);

为什么这个HOC类在React中不返回渲染的子组件？

3 个答案: