Импорт компонента React connect

Question

Ладно, у меня есть такой компонент, который будет экспортирован как реактивный-избыточный ...

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

}

Я пытаюсь импортировать это так ...

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

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

Я получаю следующую ошибку ...

Uncaught Error: объекты недопустимы как дочерний элемент 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 не распознает как таковой.

Реальный компонент находится внутри свойства 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';