导入节点模块导出默认类导致'模块'不是'构造函数'

我正在尝试导入节点模块React-Signature-Pad。该index.js文件看起来像这样：导入节点模块导出默认类导致'模块'不是'构造函数'

import PropTypes from 'prop-types' 
import React, { Component } from 'react' 
import trimCanvas from 'trim-canvas' 

import Bezier from './bezier.js' 
import Point from './point.js' 

export default class SignatureCanvas extends Component { 
    static propTypes = { 
    velocityFilterWeight: PropTypes.number, 
    minWidth: PropTypes.number, 
    maxWidth: PropTypes.number, 
    dotSize: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), 
    penColor: PropTypes.string, 
    onEnd: PropTypes.func, 
    onBegin: PropTypes.func, 
    canvasProps: PropTypes.object 
    } 

    static defaultProps = { 
    velocityFilterWeight: 0.7, 
    minWidth: 0.5, 
    maxWidth: 2.5, 
    dotSize:() => { 
     return (this.props.minWidth + this.props.maxWidth)/2 
    }, 
    penColor: 'black', 
    backgroundColor: 'rgba(0,0,0,0)', 
    onEnd:() => {}, 
    onBegin:() => {} 
    } 

    componentDidMount() { 
    this._ctx = this._canvas.getContext("2d"); 
    //.....

我想用这样的：import * as SignatureCanvas from 'react-signature-canvas'

但是随后SignatureCanvas evaulates将物体与“默认”的单一属性。所以当我使用我得到一个错误，因为SignatureCanvas实际上不是一个构造函数。

我已经能够得到这个工作的唯一方法是将其导入这样的：

declare var require: any; 
var SignatureCanvas = require('react-signature-canvas').default;

似乎这也不对。哪个是正确的导入方式？

我使用WebPack2捆绑网站，如果它很重要。

来源

2017-05-29 sheamus

您必须导入等，作为模块有一个默认的出口成员：

import SignatureCanvas from 'react-signature-canvas'

默认的导出是一个简单的命名为出口名称为default。所以，你甚至可以这样做：

import { default as SignatureCanvas } from 'react-signature-canvas'

或者：

import * as SignatureCanvas from 'react-signature-canvas' 

//... and use the `SignatureCanvas` class by accessing the `default property` 
new SignatureCanvas.default()

见关于违约出口文档：https://www.typescriptlang.org/docs/handbook/modules.html#default-exports

来源

2017-05-29 17:37:41 Saravana

谢谢。我无法获得这种语法在TypeScript中编译。我创建了一个客户.d.ts文件，我在导入行上发现错误，指出没有默认导出。但是我发现在声明文件中更改导出= SignatureCanvas以导出默认SignatureCanvas与您的答案一起工作。谢谢。 - sheamus刚刚编辑 – sheamus

导入此模块的方式 - 有工作作为一类 - 是：

import SignatureCanvas from 'react-signature-canvas'; 

var x = new SignatureCanvas(...);

import * as xxx from 'xxx'语法的工作原理与您发现的一样：def模块xxx的输出伪影设置为xxx.default。在你的情况下，你将不得不：

import * as SignatureCanvas from 'react-signature-canvas'; 

var x = new SignatureCanvas.default(...); // now x is the same as above

来源

2017-05-29 17:38:09

导入节点模块导出默认类导致'模块'不是'构造函数'

回答

相关问题