Question

我正在为我的项目创建一个装饰器或更高阶的组件（HOC），它接受一个工厂函数，并返回另一个包装组件的函数，如下所示：

class X extends React.Component {
  render() {
    return <div>Hi</div>
  }
}
export default Decorator(factory)(X);

或

@Decorator(factory)
export default class X extends React.Component {
  render() {
    return <div>Hi</div>
  }
}

我的装饰者的代码是这样的：

export default function Decorator(factoryFn) {
  return function decorate(Component) {
    return class DecoratedComponent extends Component {
      static contextTypes = {
        allStyles: PropTypes.object.isRequired,
      }
      render() {
        const gStyles = factoryFn(this.context.allStyles);
        return (
          <Component {...this.props} gStyles={gStyles} />
        );
      }
    };
  };
}

运行此操作时，我收到来自babel-runtime/inherits.js的错误消息，其中显示：Super expression must either be null or a function, not object。

创建装饰器或HOC的正确方法是什么，就像我上面描述的那样？

创建HOC使Super表达式必须为null或函数，而不是对象

0 个答案: