Reactjs 为什么这个HOC类不返回React中呈现的子组件？

在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

{''}{wishlistSuccess？'Added！':'addtowishlist'}

但是，如果我在我的组件和JSX中使用导入将以下内容更改为小写，则不会呈现任何内容，而不会触发任何生命周期方法，这令人费解

import addToWishListButtonWrapper from 'src/components/wishlist_button'

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

从“src/components/wishlist_按钮”导入AddToWishListButtonRapper
{''}{wishlistSuccess？'Added！':'addtowishlist'}

您没有正确使用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

---

{() => (
{''}{wishlistSuccess？'Added！':'addtowishlist'}
)}

HOC

addToWishListButtonRapper

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

你需要像这样使用它（我把AddToWishListButtonRapper的例子做得很小，因为这是惯例）——

然后像这样渲染-

<EnhancedWishList />

---

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

class WishlistButton extends Component{
  -- component logic
}

export default AddToWishListButtonWrapper(WishlistButton); 

---

伟大的谢谢我不知道我为什么要这样构造它，我猜小写元素会生成一个空的html包装器元素，这让我感到困惑

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

<WrapComponent />

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>

const EnhancedWishList = addToWishListButtonWrapper(WishlistButton)

<EnhancedWishList />

class WishlistButton extends Component{
  -- component logic
}

export default AddToWishListButtonWrapper(WishlistButton);