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

时间:2018-12-08 20:31:07

标签: reactjs typescript redux react-redux

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

->NEWSEQUENTIALID()

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

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);

我收到以下TypeScript错误

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

在添加React-Redux代码之前,类定义为

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

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

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

现在我要添加React-Redux connect()语句,如何在其他组件中正确引用TopBar?

1 个答案:

答案 0 :(得分:3)

这是默认导出,您必须以这种方式导入。

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

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