在React应用程序中引用自制模块时，“时刻不是函数”

Question

我正在尝试使用react-boilerplate在一个简单的React应用程序中创建的模块。我正在导入模块，但是它说模块中的moment未定义。

这是错误和记录的时刻，只是为了表明this.props.date确实返回了片刻。

Moment {_isAMomentObject: true, _isUTC: false, _pf: {…}, _locale: Locale, _d: 
index.js:23 Uncaught (in promise) TypeError: moment is not a function
    at module.exports (index.js:23)

该模块在NPM上，只使用moment基于日期做一些简单的逻辑。这是该文件的index.js。

daysleft / index.js

index.js

const moment = require('moment');

moment.suppressDeprecationWarnings = true;
module.exports = (input, opts) => {
    if (input === undefined || input === '') {
        throw new TypeError('Expected a string, got nothing');
    }

    if (typeof input !== 'string') {
        if (typeof input !== 'object' && (input.isMoment === undefined || !input.isMoment())) {
            throw new TypeError(`Expected a string, got ${typeof input}`);
        }
    }

    opts = opts || {};

    if (opts.startDate && (typeof opts.startDate !== 'string')) {
        if (typeof opts.startDate !== 'object' && (opts.startDate.isMoment === undefined || !opts.startDate.isMoment())) {
            throw new TypeError(`Expected a string, got ${typeof opts.startDate}`);
        }
    }

    const startDate = moment(opts.startDate || moment().format('YYYY-MM-DD'));
    const endDate = moment(input);

    if (!endDate.isValid() || !startDate.isValid()) {
        throw new TypeError('Invalid date input');
    }

    return endDate.diff(startDate, 'days');
};

然后我尝试在反应应用程序中使用它

对myApp / SomeComponent.js

render() {
    return (
      <Wrapper onClick={this.onClick}>
        <Label>{this.props.name}</Label>
        <DateView>{this.props.date.format('LL')}</DateView>
        <Hr />
        <DaysLeftContainer>
          <DaysLeft>
            {daysleft(moment(this.props.date))}
          </DaysLeft> days left
        </DaysLeftContainer>
      </Wrapper>
    );
  }

非常感谢任何帮助。

链接到daysleft模块，需要它：https://github.com/qbolt/daysleft/

Answer 1

为什么尝试在组件方面进行日期转换？

按原样传递参数，然后转换模块函数内的值。否则，您需要在组件文件中导入时刻库。