Вложение подключенных редукционных контейнеров и презентационных компонентов в машинописный текст

Question

Я читал подобные вопросы раньше, но, похоже, ни один из них не решает мою проблему, чего я пытаюсь достичь.Я должен быть слепым или неправильно понимать что-то принципиально.

• Вложение компонента контейнера в презентационный компонент (Stackoverflow)
• Зачем использовать вложенный connect реагирует на редукциюкомпоненты это хорошо (Средний)

Мой пример кода следующий:

Когда явложив компоненты, я получаю следующую структуру:

<Provider store={store}>
    { /* container component connected via redux (has as you can see props.children) */ }
    <Navigation>
        { /* presentational component */ }
        <Main>
            { /* container component connected via redux */ }
            <Counter />
        </Main>
    </Navigation>
</Provider>

Хотя это кажется довольно интуитивным, я получаю странные ошибки, которые я не могу объяснить (было бы неплохо, если бы кто-то мог).В браузере ошибка:

You must pass a component to the function returned by connect. Instead received undefined (Navigation.tsx) Я даже не уверен, связана ли ошибка с компонентами вложения.Когда я изменяю счетчик на презентационный компонент, все работает как положено.Typescript или моя реализация имеют проблемы с контейнерами внутри уже подключенных компонентов.

В песочнице, похоже, возникает ошибка при компоновке counter внутри main.Я что-то пропустил?Может быть, типа?

Я понимаю, что могу решить эту проблему, вложив только в мой контейнер верхнего уровня navigation отображение / соединение только один раз с магазином, но это не то решение, которое я ищу.Я бы предпочел воспользоваться советом https://stackoverflow.com/a/38537606/222474.

Заранее спасибо за помощь.

Редактировать:

Пока @Tomasz решилошибка, я не понимаю, почему это происходит.Пролистывание https://www.typescriptlang.org/docs/handbook/module-resolution.html тоже не помогло.Относится ли этот тип к экспорту index.js?Если кто-то может добавить разъяснение, это может быть полезно.

Ответ:

Это связано с циклическими ссылками, где некоторые компоненты импортируются раньше других, следовательно, undefined,Это довольно часто, и это случалось со мной много раз.Решение похоже на принятый ответ: импортируйте ваш компонент напрямую.

Answer 1

Я не могу объяснить, что является настоящей ошибкой, но есть некоторые проблемы с импортом из components / index.tsx .

Исправление container / Counter.tsx to:

import CounterComponent from "../components/Counter";

и container / Navigation.tsx

import NavigationComponent from "../components/Navigation";

ошибка, которую выдает connect, исчезнет.

Интересно, если вы измените следующее в container / Counter.tsx

import * as all from '../components';
console.log(all)

Ранее ваш код записывал пустой объект.Как только я изменил импорт, как описано выше, он регистрирует весь объект с компонентами как записи.