Question

我有一个应用程序，该应用程序可以导入由我创建的js通用库。该库导出几个组件。当我尝试在我的应用程序中导入其中之一时，我得到：

“在“ Connect（ListComponent）”的上下文中找不到“存储”。要么将根组件包装在中，要么将自定义的React上下文提供程序传递给Connect，并在connect中将相应的React上下文使用者传递给Connect（ListComponent）。选项。”

如果我在应用程序中移动了该组件（文件），它将正常工作。所以问题是当我从库中导出时。在我的图书馆中，我正在使用babel转换每个文件。

已更新

工作

import ListComponent from "./ListComponent";

class App extends Component {
  render() {
    return (
      </ListComponent>
    )
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

不起作用

import ListComponent from "js-common";

class App extends Component {
  render() {
    return (
      </ListComponent>
    )
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

Answer 1

据我所知，这里的问题是您使用了react-redux进行状态管理，这要求您将根组件与react-redux附带的Provider组件一起包装。它可以在您的应用程序中使用，因为您可能已经在该应用程序中提供了商店，但是在导出它时，在导入它的任何位置都没有商店。

如果您试图编写要导出的库，那么最好不要使用redux ...，或者至少，您需要为打算交付的顶级组件提供Provider。 Provider的用法如下。

    <Provider store={store}>
        <Component />
    </Provider>

其中store是您正在使用的Redux存储区

在“连接”的上下文中找不到“商店”

1 个答案: