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

}

導出默認 { 組件：connect(mapStateToProps)(Sites), loadData }

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 /> 。 如果您需要使用任何方法或其他導出值，您可以使用與上述類似的語法。