导入 React 连接组件

Question

好的，所以我有一个像这样导出的react-redux组件...

export default {
component: connect(mapStateToProps)(Sites),
loadData

}

我正在尝试像这样导入它......

import Sites from '../views/site/sitesView';

const Home = () =>
AccountService.authenticated() ? (
    <Sites/>
) : (....

我不断收到以下错误...

未捕获错误：对象作为 React 子对象无效（发现：带有键 {Sites} 的对象）。如果您打算渲染子集合，请改用数组。

导入此内容的正确方法是什么？

我已经尝试过...

import { Sites } from '../views/site/sitesView';

谢谢。

完整代码...

    function loadData(store) {
const state = store.getState();
const companyId = state.accountReducer.userinfo.companyId;

return store.dispatch({
    type: siteActions.SITES_COMPANY_REQUESTED,
    payload: {
        companyId: companyId,
        page: 1,
        items: 50
    }
});

}

function mapStateToProps(state, ownProps) {
return {
    loading: state.siteReducer.isRequesting,
    companyId: state.accountReducer.userinfo.companyId,
    sites: state.siteReducer.sites,
    countries: state.countryReducer.countries
}

}

导出默认值{ 组件：连接（mapStateToProps）（站点）， 加载数据 }

Answer 1

默认导出的是具有多个属性的对象，而不是单独的组件。

import Sites from '../views/site/sitesView';

执行此操作时，变量

Sites

会分配给您导出的整个对象，其中包括带有组件的属性和带有

loadData

方法的另一个属性。这意味着，即使你给了它相同的名称，这个导入的

Sites

实际上并不是React组件，这就是为什么React无法识别的原因。

真正的组件位于导入对象的

component

属性内部，因此为了渲染它，您需要直接引用它：

<Site.component />

如果您想避免这种显式引用，则应考虑更改导出数据的方式。 我建议仅默认导出组件，并将单独的导出添加到您通常不需要的任何其他值或函数，如下所示：

export function loadData () { ... }

export default connect(mapStateToProps)(Sites)

使用这种替代方案，您可以像这样导入两个内容：

import Sites, { loadData }  from '../views/site/sitesView';

Sites

现在仅包含组件，因此您可以直接在渲染方法中使用

<Sites />

。如果您需要使用任何方法或其他导出的值，您可以使用与上面类似的语法来执行此操作。

Answer 2

像这样导出

export default connect(mapStateToProps)(Sites)

并将其导入为，因为它是默认导出

import Sites from '../views/site/sitesView';