作为道具从HOC注入/传递组件到Wrapped-Component

Question

In my recent React project I have used some HOC's to pass component as props to the wrappedcomponent and I was wondering if there is anything thing wrong with this approach. Below is an example:

HOC:

import AnotherComponent from './a'

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

And here is the component that uses the above HOC

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

Thank you

Answer 1

in withExampleComponent you are missing to return a component definition. According react site https://reactjs.org/docs/higher-order-components.html . you should return something like

import AnotherComponent from './a'

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

and to use with MainComponent

export default withExampleComponent(MainComponent);