Инъекция / передача компонентов в качестве реквизита из HOC в Wrapped-Component

Question

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

СПЕЦИАЛЬНЫЙ:

import AnotherComponent from './a'

function withExampleComponent(WrappedComponent){
 render(){
     const exampleComp = <ExampleComponent someprops={value} />
     return( 
        <WrappedComponent {...this.props} exampleComponent={exampleComp} />
     )
   }
}

А вот компонент, который использует вышеуказанный HOC

class MainComponent extends React.Component{
    render(){
       const {exampleComponent} = this.props
       return(
           <div>
              {exampleComponent}
           </div>
        )
     }
}
export default withExampleComponent(MainComponent)

Спасибо

Answer 1

в withExampleComponent, которого вам не хватает для возврата определения компонента. Согласно сайту реакции https://reactjs.org/docs/higher-order-components.html. вы должны вернуть что-то вроде

import AnotherComponent from './a'

function withExampleComponent(WrappedComponent){
 return class extends React.Component {
     render(){
         const exampleComp = <ExampleComponent someprops={value} />
         return( 
            <WrappedComponent {...this.props} exampleComponent={exampleComp} />
         )
       }
    }
}

и использовать с MainComponent

export default withExampleComponent(MainComponent);