React中的MomentJS问题

Question

我在react应用程序中包含momentjs时遇到问题。我在网上看到的所有例子都表明，我可以在创建constspreadsheetInfoRow的地方使用即时内联。React抱怨道："未处理的拒绝(TypeError(：无法将类作为函数调用"，引用了该行的即时调用。如果我只是使用一个正常的字符串，它可以正常工作，所以它是整个文件中唯一导致问题的部分。有什么想法吗？

import React from 'react';
import ExcelJS from 'exceljs/dist/es5/exceljs.browser.js'
import { saveAs } from 'file-saver'
import moment from 'react-moment';
class SpreadsheetTester extends React.Component {
async saveAsExcel() {
const wb = new ExcelJS.Workbook()
const worksheet = wb.addWorksheet()
const companyInfoRow = worksheet.addRow(['Title'])
const spreadsheetInfoRow = worksheet.addRow([`Purchase Stuff as of ${moment()}`])
const spreadsheetOptionsRow = worksheet.addRow([`There were 2 owners who HAVE ordered something between 4/1/2020 and 4/22/2020.`])
const headerRow = worksheet.addRow(['Last Order Date', 'Last Name', 'First Name', 'Owner Address', 'City', 'State', 'Zip', 'Phone', 'Cell', 'Work Phone', 'Email', 'Bar Code', 'Status'])
const buf = await wb.xlsx.writeBuffer()
saveAs(new Blob([buf]), 'abc.xlsx')
}
render() {
return (
<button onClick={this.saveAsExcel}>Click Here</button>
);
}
}
export default SpreadsheetTester;

Answer 1

您使用错误。试试这个：

import Moment from 'react-moment'
let nowDate =  <Moment date={Date.now()}/>;

现在可以在所需位置使用nowDate变量。注意，我在导入中使用了Moment作为资本，你也应该这样做。这对我有效。

编辑：

import React from 'react';
import ExcelJS from 'exceljs/dist/es5/exceljs.browser.js'
import { saveAs } from 'file-saver'
import Moment from 'react-moment';
class SpreadsheetTester extends React.Component {
async saveAsExcel() {
const wb = new ExcelJS.Workbook()
const worksheet = wb.addWorksheet()
let nowDate = <Moment date={Date.now()}/>
const companyInfoRow = worksheet.addRow(['Title'])
const spreadsheetInfoRow = worksheet.addRow([`Purchase Stuff as of ${nowDate}`])
const spreadsheetOptionsRow = worksheet.addRow([`There were 2 owners who HAVE ordered something between 4/1/2020 and 4/22/2020.`])
const headerRow = worksheet.addRow(['Last Order Date', 'Last Name', 'First Name', 'Owner Address', 'City', 'State', 'Zip', 'Phone', 'Cell', 'Work Phone', 'Email', 'Bar Code', 'Status'])
const buf = await wb.xlsx.writeBuffer()
saveAs(new Blob([buf]), 'abc.xlsx')
}
render() {
return (
<button onClick={this.saveAsExcel}>Click Here</button>
);
}
}
export default SpreadsheetTester;

我也编辑了你的代码，以反映必要的更改，你可以粘贴它，看看它是否有效。

Answer 2

import React from 'react';
import ExcelJS from 'exceljs/dist/es5/exceljs.browser.js'
import { saveAs } from 'file-saver'
import * as moment from 'moment'
class SpreadsheetTester extends React.Component {
async saveAsExcel() {
const wb = new ExcelJS.Workbook()
const worksheet = wb.addWorksheet()
const companyInfoRow = worksheet.addRow(['Title'])
const spreadsheetInfoRow = worksheet.addRow([`Purchase Stuff as of ${moment(Date.now()).format('DD/MM/YYYY')}`])
....

Answer 3

我在node中测试了moment，它与您使用它的方式很好。nodemoment包作为函数导出

然而，react-moment的工作方式显然有点不同。使用您收到的"Unhandled Rejection (TypeError): Cannot call a class as a function"错误消息，它似乎被导出为一个类。

根据官方文件。，react-moment应该以这种方式工作：

import React  from 'react';
import Moment from 'react-moment';
export default class MyComponent extends React.Component {
render() {
return (
<Moment interval={30000}>
1976-04-19T12:59-0500
</Moment>
);
}
}