reactjs - typescript'te react hoc

HOC'yi bu makalede açıkladığım gibi tanımlıyorum: https://medium.com/@jrwebdev/react-higher-order-component-patterns-in-typescript-42278f7590fb

Kodum (HOC):

import * as React from 'react';
import Dropzone from 'react-dropzone'


export const addImage = <P extends object>(WrappedComponent: React.ComponentType<P>) => {
  return class extends React.Component {

    render() {

      return <Dropzone noClick onDrop={()=>{console.log('drop')}}>
        {({ getRootProps, getInputProps }) => (

            <div {...getRootProps()} onClick={()=>{console.log('aa')}}>
              <input {...getInputProps()} />
              <WrappedComponent {...this.props} />;
      </div>

        )}

      </Dropzone>

    }
  };
}

Diğer bileşende:

addImage(<Img src={item} />)

HOC hatasında: ''{ children?: ReactNode; }'' tür kısıtlaması ''P'' ile atanabilir, ancak ''P'' kısıtlama ''object''in farklı bir alt türü ile oluşturulabilir

Hata nasıl düzeltilir?

Cevap #1

Bence addImage'den döndürdüğünüz sınıfın props türünü belirtmeniz gerekiyor:

export const addImage = <P extends object>(WrappedComponent: React.ComponentType<P>) => {
  return class extends React.Component<P> { // <- The "<P>" is the missing part

Bu, ekran görüntünüzdeki uyarıyı ortadan kaldırmalıdır. Ancak bundan sonra Alejandro Garcia Anglada, HOC'yi tam olarak nasıl kullanacağınıza dair tüm yorumlarıyla haklıdır.

Cevap #2

Sizin durumunuzda, bileşeninizi bu şekilde sarmanız gerekecek.

  1. Sarmalamak istediğiniz React bileşenine bir referansa sahip olmak:
const Image = ({ item }) => <Img src={item} />
  1. Referansı argüman ile HOC'a geçirme. Yukarıdaki kodunuzda görebileceğiniz gibi, HOC'unuz bir P argümanı bekliyor ve bu argüman Image'ye geçirdiğiniz props türüdür.
type Props = {
  item: string
}

addImage<Props>(Image)

İlgili makaleler