堆棧內存溢出
  簡體   English   中英

React HOC - function `不是函數`

[英]React HOC - function `is not a function`

 原文  2020-07-31 03:38:31  9   1    reactjs/ components

問題描述

在 React HOC 上工作的簡單家庭作業問題。

我認為這很簡單...... HOC [withClapAnimation] 將animate function 傳遞給 [MediumClap]。 僅對 console.logs 進行animate處理。 [MediumClap] 是觸發時應該吐出animate的按鈕...我得到響應animate is not a function

有任何想法嗎？

animate之前

import React, {Component, useState} from 'react'
import styles from './index.css'

const initialState = {
  count: 0,
  countTotal: 200,
  isClicked: false
}

const withClapAnimation = WrappedComponent => {
  class WithClapAnimation extends Component {
  render () {
      return <WrappedComponent {...this.props}  />
    }
  }
  return WrappedComponent 
}

const MediumClap = () => {
  const MAX_USER_CLAP = 10
  const [clapState, setClapState] = useState(initialState)
  const {count, countTotal, isClicked } = clapState

  const handleClapClick = () => {
    
    setClapState(prevState => ({
      isClicked: true,
      count: Math.min(count + 1, MAX_USER_CLAP),
      countTotal: 
        count < MAX_USER_CLAP 
          ? prevState.countTotal + 1 
          : prevState.countTotal
    }))  
  }
  return <button className={styles.clap} onClick={handleClapClick}>
      <ClapIcon isClicked={isClicked} />
      <ClapCount count={count} />
      <ClapTotal countTotal={countTotal} />
    </button>

}

const ClapIcon = ( {isClicked}) => {
  return <span> 
    <svg 
      xmlns="http://www.w3.org/2000/svg" 
      fill-rule="evenodd" 
      stroke-linejoin="round" 
      stroke-miterlimit="2" 
      clip-rule="evenodd" 
      viewBox="0 0 100 125" 
      className={`${styles.icon} ${isClicked && styles.checked}`}
    >
      <defs/>
      <g fill-rule="nonzero">
        <path d="M45.5 50.7c-2.1-.4-4.7.7-5.7 4.8-.5 2.2-.4 5.8-.2 9.6v.7c0 .9-.7 1.6-1.6 1.5-.7-.1-1.2-.7-1.2-1.4v-.6c-.1-3-.2-5.6-.1-7.8.1-.9.2-1.8.4-2.5.7-3.2 2.4-5.2 4.3-6.2.9-3.1 1.7-6 2.5-7.7 2.1-5-4.1-8.6-7.5-4.2-3.5 4.3-14.1 19.8-14 28.1 0 3.8.9 9.7 2.4 15.2.2.9 0 1.8-.6 2.5l-2.4 2.9c-.7.9-.6 2.2.2 2.9L32.2 97c.9.7 2.2.6 2.9-.3 1.4-1.8 3.8-4.7 5.7-7.4 4-5.4 6.6-11.6 7.1-14.7.4-2.8.5-6.7.4-10.6-.1-3.3-.2-6.8.2-9.7.3-2-1.3-3.3-3-3.6zM78.2 85.5l-2.4-2.9c-.6-.7-.8-1.6-.6-2.5 1.5-5.5 2.4-11.4 2.4-15.2.1-8.3-10.5-23.8-13.9-28.3-3.4-4.4-9.6-.8-7.5 4.2.7 1.7 1.6 4.6 2.5 7.7 1.9 1 3.5 3 4.3 6.2.2.8.3 1.6.4 2.5.2 2.2.1 4.9-.1 7.8v.6c0 .7-.5 1.4-1.2 1.4-.9.1-1.7-.6-1.6-1.5v-.7c.2-3.8.3-7.4-.2-9.6-1-4.1-3.6-5.2-5.7-4.8-1.7.3-3.3 1.6-3.1 3.7.3 2.9.3 6.4.2 9.7-.1 3.8 0 7.8.4 10.6.5 3.1 3.1 9.3 7.1 14.7 2 2.6 4.3 5.6 5.7 7.4.7.9 2 1 2.9.3L78 88.4c.8-.7.9-2 .2-2.9zM53.7 18V6.1c0-2-1.6-3.6-3.6-3.6s-3.6 1.6-3.6 3.6V18c0 2 1.6 3.6 3.6 3.6 1.9.1 3.6-1.6 3.6-3.6zM33.7 26.3c.7.7 1.6 1.1 2.6 1.1.9 0 1.9-.4 2.6-1.1 1.4-1.4 1.4-3.7 0-5.1l-8.4-8.4c-1.4-1.4-3.7-1.4-5.1 0-1.4 1.4-1.4 3.7 0 5.1l8.3 8.4zM63.8 27.4c.9 0 1.9-.4 2.6-1.1l8.4-8.4c1.4-1.4 1.4-3.7 0-5.1-1.4-1.4-3.7-1.4-5.1 0l-8.4 8.4c-1.4 1.4-1.4 3.7 0 5.1.6.7 1.6 1.1 2.5 1.1z "/>
      </g>
    </svg> 
  </span>
}
const ClapCount = ({count}) => {
  return <span className={styles.count}> + {count} </span>
}

const ClapTotal = ({countTotal}) => {
  return <span className={styles.total}> {countTotal} </span>
}

const Usage = () => {
  const AnimatedMediumClap = withClapAnimation(MediumClap)
  return <AnimatedMediumClap />
}
export default Usage

添加animate后

import React, {Component, useState} from 'react'
import styles from './index.css'

const initialState = {
  count: 0,
  countTotal: 200,
  isClicked: false
}

const withClapAnimation = WrappedComponent => {
  class WithClapAnimation extends Component {
    animate = () => {
        console.log('animate')
    }
    render () {
      return <WrappedComponent {...this.props} animate={this.animate} />
    }
  }
  return WrappedComponent 
}

const MediumClap = ({animate}) => {    
  const MAX_USER_CLAP = 10
  const [clapState, setClapState] = useState(initialState)
  const {count, countTotal, isClicked } = clapState

  const handleClapClick = () => {
    animate()
    setClapState(prevState => ({
      isClicked: true,
      count: Math.min(count + 1, MAX_USER_CLAP),
      countTotal: 
        count < MAX_USER_CLAP 
          ? prevState.countTotal + 1 
          : prevState.countTotal
    }))  
  }
  return <button className={styles.clap} onClick={handleClapClick}>
      <ClapIcon isClicked={isClicked} />
      <ClapCount count={count} />
      <ClapTotal countTotal={countTotal} />
    </button>

}

const ClapIcon = ( {isClicked}) => {
  return <span> 
    <svg 
      xmlns="http://www.w3.org/2000/svg" 
      fill-rule="evenodd" 
      stroke-linejoin="round" 
      stroke-miterlimit="2" 
      clip-rule="evenodd" 
      viewBox="0 0 100 125" 
      className={`${styles.icon} ${isClicked && styles.checked}`}
    >
      <defs/>
      <g fill-rule="nonzero">
        <path d="M45.5 50.7c-2.1-.4-4.7.7-5.7 4.8-.5 2.2-.4 5.8-.2 9.6v.7c0 .9-.7 1.6-1.6 1.5-.7-.1-1.2-.7-1.2-1.4v-.6c-.1-3-.2-5.6-.1-7.8.1-.9.2-1.8.4-2.5.7-3.2 2.4-5.2 4.3-6.2.9-3.1 1.7-6 2.5-7.7 2.1-5-4.1-8.6-7.5-4.2-3.5 4.3-14.1 19.8-14 28.1 0 3.8.9 9.7 2.4 15.2.2.9 0 1.8-.6 2.5l-2.4 2.9c-.7.9-.6 2.2.2 2.9L32.2 97c.9.7 2.2.6 2.9-.3 1.4-1.8 3.8-4.7 5.7-7.4 4-5.4 6.6-11.6 7.1-14.7.4-2.8.5-6.7.4-10.6-.1-3.3-.2-6.8.2-9.7.3-2-1.3-3.3-3-3.6zM78.2 85.5l-2.4-2.9c-.6-.7-.8-1.6-.6-2.5 1.5-5.5 2.4-11.4 2.4-15.2.1-8.3-10.5-23.8-13.9-28.3-3.4-4.4-9.6-.8-7.5 4.2.7 1.7 1.6 4.6 2.5 7.7 1.9 1 3.5 3 4.3 6.2.2.8.3 1.6.4 2.5.2 2.2.1 4.9-.1 7.8v.6c0 .7-.5 1.4-1.2 1.4-.9.1-1.7-.6-1.6-1.5v-.7c.2-3.8.3-7.4-.2-9.6-1-4.1-3.6-5.2-5.7-4.8-1.7.3-3.3 1.6-3.1 3.7.3 2.9.3 6.4.2 9.7-.1 3.8 0 7.8.4 10.6.5 3.1 3.1 9.3 7.1 14.7 2 2.6 4.3 5.6 5.7 7.4.7.9 2 1 2.9.3L78 88.4c.8-.7.9-2 .2-2.9zM53.7 18V6.1c0-2-1.6-3.6-3.6-3.6s-3.6 1.6-3.6 3.6V18c0 2 1.6 3.6 3.6 3.6 1.9.1 3.6-1.6 3.6-3.6zM33.7 26.3c.7.7 1.6 1.1 2.6 1.1.9 0 1.9-.4 2.6-1.1 1.4-1.4 1.4-3.7 0-5.1l-8.4-8.4c-1.4-1.4-3.7-1.4-5.1 0-1.4 1.4-1.4 3.7 0 5.1l8.3 8.4zM63.8 27.4c.9 0 1.9-.4 2.6-1.1l8.4-8.4c1.4-1.4 1.4-3.7 0-5.1-1.4-1.4-3.7-1.4-5.1 0l-8.4 8.4c-1.4 1.4-1.4 3.7 0 5.1.6.7 1.6 1.1 2.5 1.1z "/>
      </g>
    </svg> 
  </span>
}
const ClapCount = ({count}) => {
  return <span className={styles.count}> + {count} </span>
}

const ClapTotal = ({countTotal}) => {
  return <span className={styles.total}> {countTotal} </span>
}

const Usage = () => {
  const AnimatedMediumClap = withClapAnimation(MediumClap)
  return <AnimatedMediumClap />
}
export default Usage

之前之后

1 個解決方案

解決方案1
 2 已采納  2020-07-31 05:53:07

在 withClapAnimation HOC 中，您獲取組件WrappedComponent並在不應用任何更改的情況下返回它，而不是您需要返回修改后的組件WithClapAnimation ，如下所示：

const withClapAnimation = WrappedComponent => {
  class WithClapAnimation extends Component {
    animate = () => {
    console.log('animate')
   }
  render () {
      return <WrappedComponent {...this.props} animate={this.animate}  />
    }
  }
  return WithClapAnimation 
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 React HOC 是純 function 嗎？ React Hoc function 返回 class HOC 不是函數 在HOC中包裝React路由渲染功能 通過原始組件的 function 反應 HOC React HOC 無箭頭 function 語法 React HOC - 訪問包裝組件功能 React HOC：TypeError：無法將類作為函數調用 在HOC中訪問React組件的功能 在 React 中訪問用 HOC 包裹的組件的 function
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM