為什么我的HOC組件作業正常？#反應-有解無憂

2 個組件：- ClickCounter、mouseHoverCounter！1 個 HOC 組件來完成計數作業。

早些時候我通過在每個組件中撰寫單獨的計數器方法（cliccounter，mousehovecounter）來計算點擊和滑鼠懸停，但是現在，我試圖將組件傳遞給 hoc counter 并僅通過一個更改來獲取新組件，我'我將一個道具傳遞給 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>

僅此而已！

uj5u.com熱心網友回復：

檢查控制臺中的錯誤， 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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/339468.html

標籤：javascript 反应反应临时

上一篇：正則運算式字串在javascript中只包含數字和*,#,

下一篇：Excel-檢查產品的相同行