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

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

1 个答案: