作為道具從HOC注入/傳遞組件到Wrapped-Component

Question

在我最近的React項目中，我使用了一些HOC將組件作為道具傳遞給包裝的組件，我想知道這種方法是否有什么問題。 下面是一個示例：

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);