在另一个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> {
...
};