导入 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';