Question

我正在尝试导出没有装饰器的组件（在这种情况下为connect（））用于使用jest进行单元测试。

所以，我该怎么做：

import React, { Component } from 'react';
import { connect } from 'react-redux';

export class Header extends Component {
    render(){
        return <pre>Header</pre>
    }
}

export default connect()(Header);

使用此组件（开头的导出无效，仍会导出连接的组件）

export let Header = props => {
    render(){
        return <pre>Header</pre>
    }
}

Header = connect()(Header);

export default Header;

Answer 1

为连接的组件使用其他变量，如下所示：

export let Header = props => {
    render(){
        return <pre>Header</pre>
    }
}

let HeaderConnected = connect()(Header);

export default HeaderConnected;

现在，您无需使用Header就可以免费导入connect()

Answer 2

这甚至不需要更改默认导出即可完成：

export let Header = props => {
    render(){
        return <pre>Header</pre>
    }
}

export default connect()(Header);

可能不需要单独为connect导出原始组件，因为大多数精心设计的HOC都公开了原始组件：

import Header from '...';
const OriginalHeader = Header.WrappedComponent;

导出不带修饰符的纯功能组件

2 个答案: