导入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
}

}

导出默认值{component:connect(mapStateToProps((站点(，loadData}

Answer 1

默认情况下，导出的是一个具有多个属性的对象，而不仅仅是组件。

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

执行此操作时，将为变量Sites指定导出的整个对象，其中包括一个带有组件的特性和另一个带有loadData方法的特性。这意味着，即使你给它起了相同的名字，这个导入的Sites实际上并不是React组件，这就是为什么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';