javascript - 访问 Javascript ES6 类中声明的函数(ES2015？ES16？)

Question

我创建了一个小助手类:

import moment from 'moment';

export default class Format {
  formatDate(date) {
    return moment(date);
  }
}

我正在尝试在 JSX 模板中调用它:

import React from 'react';
import Format from '/imports/helpers/format.js';

export default class ListingCard extends React.Component {
  render() {
    return (
      <div className="card">        
        {Format.formatDate(this.props.listing.created_at)}</div>
      </div>
    )
  }
}

<小时/>

使用WebStorm，找到Format类。但方法却不然。

ListingCard.jsx:22 Uncaught TypeError: _format2.default.formatDate is not a function

知道为什么吗？

Answer 1

您需要使用static关键字来声明类方法。

export default class Format {
  static formatDate(date) {
    return moment(date);
  }
}

这样做的原因是，如果不使用static关键字，formatDate将是一个实例方法，这意味着该方法是仅在该类的实例上可用。

// e.g., how to use an instance method
var f = new Format();
f.formatDate(someDate);

<小时/>

@loganfsmyth 说得很好；这是我在最初的答案中没有想到的问题。

如果您不打算将 Format 用作类，则没有必要这样声明它。

// format.js
import moment from 'moment'
export function formatDate(date) { return moment(date); }

// otherfile.js
import {formatDate} from './format';