为什么我的 HOC 组件工作正常？ #反应答案

【问题标题】：why my HOC Component is working properly ? #React为什么我的 HOC 组件工作正常？ #反应
【发布时间】：2021-12-13 07:02:53
【问题描述】：

2 个组件：- ClickCounter、mouseHoverCounter ！ 1 个 HOC 组件来完成计数工作。

之前我通过在每个组件中编写单独的计数器方法（cliccounter，mousehovecounter）来计算点击和鼠标悬停，但现在，我正在尝试将组件传递到 hoc 计数器并仅通过一次更改获取新组件，其中我将道具传递给 originalComponent 并将其返回以查看行为，但它现在正在工作......

import React, { Component } from 'react'
import updatedComponent from './hocCounter'

class ClickCounter extends Component {

    constructor(props) {
        super(props)
    
        this.state = {
             counter:0
        }
    }

    ClickCounterHandler = () =>{
        this.setState((prevState)=>{
            return {counter:prevState.counter+1}
        })
    }

    render() {
        const count=this.state.counter
        return (
            <div>
                <button onClick={this.ClickCounterHandler}>{this.props.name} Clicked {count} Times</button>
            </div>
        )
    }
}

export default updatedComponent(ClickCounter)

import React, { Component } from 'react'
import updatedComponent from './hocCounter'

class HoverMouseCounter extends Component {

    constructor(props) {
        super(props)
    
        this.state = {
             counter:0
        }
    }
    MouseOverCounter(){
        this.setState((prevState)=>{
            return {counter:prevState.counter+1}
        })
    }

    render() {
        const count=this.state.counter
        return (
            <div>
                <h1 onMouseOver={this.MouseOverCounter.bind(this)}>{this.props.name} Hovered For {count} Time(s)</h1>
            </div>
        )
    }
}

export default updatedComponent(HoverMouseCounter)

import React from 'react'

const updatedComponent = originalComponent => {

    class newComponent extends React.Component {
        render(){
            return <originalComponent name='Harsh'/>
        }
    }
    return newComponent
}

export default updatedComponent

在 App.js 中，我正在返回

<ClickCounter></ClickCounter>
<HoverMouseCounter></HoverMouseCounter>

只有这个！

【问题讨论】：

标签： javascript reactjs react-hoc

【解决方案1】：

在控制台检查错误， index.js:1 Warning: <originalComponent /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. at originalComponent

这意味着您正在使用originalComponent 中的小写字母 React 组件应该以大写字母开头

在你的 HOC 组件中试试这个

import React from 'react'

const updatedComponent = OriginalComponent => {

    class NewComponent extends React.Component {
        render(){
            return <OriginalComponent name='Harsh'/>
        }
    }
    return NewComponent
}

export default updatedComponent

【讨论】：