reactjs - 通过原始组件的功能来反应 HOC

Question

我创建了如下反应 HOC 组件。

const UpdatedComponent = (OriginalComponent) => {
    class NewComponent extends React.Component {
        constructor(props) {
            super(props)
        
            this.state = {
                 counter:0
            }
        }

        componentDidMount(){
            
        }
    
        incrementCount = () => {
            this.setState(prevState => {
                return {counter:prevState.counter+1}
            })
        }
        render(){

            return <OriginalComponent 
                incrementCount={this.incrementCount}
                count={this.state.counter}
            />
        }
    }

    return NewComponent
}

export default UpdatedComponent

我在下面的示例中使用该组件

class HoverCounter extends Component {

   componentDidMount(){
      
   }

   handleMessages = () => {
       // need to do somthing
   }
    
    render() {
        const {incrementCount, count} = this.props
        return (
            <div onMouseOver={incrementCount}>
                Hoverd {count} times
            </div>
        )
    }
}

export default UpdatedComponent(HoverCounter)

我想知道是否可以通过

handleMessages()

对 HOC 起作用？

像这样

    export default UpdatedComponent(HoverCounter,handleMessages)

我不知道如何将原始组件函数或道具传递给 HOC。

标签： reactjs

Answer 1

你可以像这样在你的 Hoc 中得到所有东西：

 const UpdatedComponent = (OriginalComponent , func) => {
  componentDidMount(){
      func()
  }

在 HoverCounter 中，您也可以添加以下更改：

 static handleMessages(){
  // need to do something
  }

 export default UpdatedComponent(HoverCounter , HoverCounter.handleMessages)