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

像这样导出

export default connect(mapStateToProps)(Sites)

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

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

Answer 2

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

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 />。如果您需要使用任何方法或其他导出值，您可以使用与上述类似的语法来实现。

导入 React 连接组件

Importing a React connect component

import

export

connect

reactjs

react-redux