将连接的redux容器和表示组件嵌套在打字稿中

Question

我以前读过类似的问题，但似乎没有一个问题可以解决我正在努力完成的问题。我必须从根本上盲目或误解一些事情。

• Nesting a container component in a presentational component（Stackoverflow）
• Why using nested connect react redux components is good（中）

我的代码示例如下：

当我嵌套组件时，我得到以下结构：

<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）我甚至不确定错误是否与嵌套组件有关。当我改变计数器作为表示组件时，一切都按预期工作。打字稿或我的实现在已连接组件内的容器方面存在问题。

在沙箱中，错误似乎来自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 更正为：

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)

以前，您的代码将记录一个空对象。一旦我将导入更改为上面的方式 - 它将整个对象记录为组件作为条目。