ant design的UI组件不能直接作为高阶函数的组件参数？

Question

项目中需要对页面元素根据权限进行显示隐藏，所以用到了高阶组件。

高阶函数如下：

import React,{Component,PropTypes} from 'react';

//高阶组件,用于权限校验
export  let wrapAuth = ComposedComponent =>class WrapComponent extends Component {

    // 构造
    constructor(props) {
      super(props);
      // 初始状态
      this.state = {};
    }

    static propTypes = {
      auth:PropTypes.string.isRequired,
    };

    checkAuth = ()=> {
       //判断是否有权限
    };

    render() {
      if (!this.checkAuth()) {
        return null;
      } else {
        return <ComposedComponent  {...this.props} />;
      }
    }
};

直接作为组件参数传递给高阶函数，结果报错

import {Button} from 'antd';
import {wrapAuth} from "./AuthWrapper";

const AuthButton = wrapAuth(Button);

只好这样写，又多包了一层。

const AuthButton = wrapAuth(class extends Component{
  // 构造
  constructor(props) {
    super(props);
    // 初始状态
  }
  render(){
    return (
      <Button {...this.props} ></Button>
    );
  }
});

我觉得这样不科学，是我的写法不当吗？求解答

Answer 1

可以的，检查下 import {Button} from 'antd'; 这里的 Button 是不是存在，不存在的话试试重装 node_modules，有用 babel-plugin-import 的话也检查一下配置。