时间戳

首页 > 解决方案 > 为什么带有样式的 HOC 会抛出错误？

reactjs - 为什么带有样式的 HOC 会抛出错误？

问题描述

我建立了一个 HOC 并想用样式包装它。但后来我收到以下错误。怎么了？

TypeError: Cannot call a class as a function

反应js

const withLoader = (loadingProp) => (WrappedComponent) => {
  return class LoadIndicator extends Component {

    render() {

      return <h1>hello world</h1>
    }
  }
}

export default withStyles(styles)(withLoader)

标签： reactjs

解决方案

功能组件return应该总是像render function返回值在class components.

对您的代码进行修改后应该可以解决您的错误。

class LoadIndicator extends Component {
  render() {
    return <h1>hello world</h1>
  }
}

const withLoader = (loadingProp) => (WrappedComponent) => {
  return <LoadIndicator />
}

export default withStyles(styles)(withLoader(loadingProp))

推荐阅读