Question

此项目由不同的组件组成，这些组件之间的关系很少，应并排显示。因此，我想设置应用程序，以便每个主要组件分别查询Redux存储。 only example in the documentation显示状态被传递到顶部组件，然后针对每个子组件分解。

This is a snapshot of the app，当时我遇到了错误。

简单地说，当我尝试实例化未连接的React组件中的已连接的React组件时，出现此错误：

ERROR in /Users/savanni/src/dashboard/src/main.tsx
./src/main.tsx
[tsl] ERROR in /Users/savanni/src/dashboard/src/main.tsx(22,8)
      TS2741: Property 'predictions' is missing in type '{}' but required in type 'Readonly<Pick<Props, "predictions">>'.

主要组件的简化版本如下：

const AppMain = () => (
  <div className={csn(["flex", "full-width"])}>
    <TransitView />
    <WeatherView />
  </div>
)

我已经这样设置了TransitView：

interface Props {
  predictions: Array<mbta.RawPrediction>
}

export const Transit: React.SFC<Props> = ({ predictions }) => (
  <div>
    {predictions.map(prediction => (
      <Prediction key={prediction.id} prediction={prediction} />
    ))}
  </div>
)

export default connect((state: AppState) => {
  predictions: getPredictions(state)
})(Transit)

最后，我从一个<Provider>组件中实例化了我的AppMain。

但是，我在<TransitView />声明中遇到了此类型错误。

令我感到困扰的原因是，我从构建以前的应用程序（但使用Javascript）知道TransitView根本不需要任何组件，并且redux Provider和connect会将状态参数传递到正确的位置。

那么，我该如何安抚打字稿？

Answer 1

您要导入正确的导出内容吗？

您默认导出连接的组件，因此这是您应该导入的默认导出。

例如您应该导入默认的导出

import TransitView from './transitView'

您应该不导入命名的导出

import { Transit } from './transitView'

Answer 2

整个混乱归结为一个误导性的错误消息。

虽然该错误可能是正确的，但相关的错误在此代码中：

export default connect((state: AppState) => {
  predictions: getPredictions(state),
})(Transit)

请注意如何在我的参数中进行连接，它是块的功能，而不是字典的功能。正确的代码仅包含一组额外的括号。

export default connect((state: AppState) => ({
  predictions: getPredictions(state),
}))(Transit)

从技术上讲，这意味着我没有connect的良好类型签名。我实际上无法理解connect中@types/react-redux的类型签名，因此既无法进一步探索也无法确定这是否是预期的行为。

我可以通过将Transit的类型签名临时更改为any来发现问题，以便编译代码，然后解释在运行时控制台中显示的错误消息。 / p>

在Typescript React项目中，如何实例化连接的组件？

2 个答案: