在另一个 TypeScript 组件中引用 React-Redux TypeScript 组件会导致“无导出成员”错误

Question

我有以下名为 TopBar 的 TypeScript (v3.01) React 组件，我现在正在向其中添加 React-Redux。然后在名为 Layout 的父组件中引用 TopBar 组件。

import * as React from 'react';
import { connect } from "react-redux";

import { decrementZoomLevel, incrementZoomLevel, setCenterPoint, setZoomLevel } from '../store/actions';

class TopBar extends React.Component<any, any>{
...
};

/*
 * Redux-React setup
*/
const mapStateToProps = (state: any): any => {
  return {
    centerPoint: state.centerPoint,
    zoomLevel: state.zoomLevel
  }
}

export default connect(mapStateToProps)(TopBar);

但是，当我在另一个 Layout TypeScript 组件中引用该组件时

import * as React from 'react';
import { TopBar } from './TopBar';

export class Layout extends React.Component<any, any> {
...
};

我收到以下 TypeScript 错误

(TS) 模块：“C:/....../TopBar”没有导出成员“TopBar”。

在添加 React-Redux 代码之前，类定义是

export default class TopBar extends React.Component<any, any>{
...
};

并且我能够在没有错误的情况下在 Layout 中引用 TopBar 组件。

现在我添加了 React-Redux connect() 语句，如何在另一个组件中正确引用 TopBar？

Answer 1

这是默认导出，你必须这样导入。

import * as React from 'react';
import TopBar from './TopBar';

export class Layout extends React.Component<any, any> {
...
};