react-big-calendar:无法读取未定义的属性“ momentLocalizer”

时间:2018-06-26 22:45:39

标签: reactjs react-big-calendar

在我的项目中,我正在尝试初始化react-big-calendar,但这是说它不存在。这是控制台中的错误:

home.tsx:18 Uncaught TypeError: Cannot read property 'momentLocalizer' of undefined
    at Object../src/main/webapp/app/modules/home/home.tsx (home.tsx:18)
    at __webpack_require__ (bootstrap:709)
    at fn (bootstrap:94)...

我检查了我的依赖关系,甚至检查了我的node_modules文件夹中的库,它在那里。还有其他的事情。这是我的代码:

import './home.scss';

import * as React from 'react';
import { connect } from 'react-redux';
import { getSession } from 'app/shared/reducers/authentication';
import BigCalendar from 'react-big-calendar';
import moment from 'moment';

// Setup the localizer by providing the moment (or globalize) Object
// to the correct localizer.
BigCalendar.momentLocalizer(moment); // or globalizeLocalizer

export interface IHomeProp extends StateProps, DispatchProps {}


const MyCalendar = props => (
  <div>
    <BigCalendar
      events={[]}
      startAccessor='startDate'
      endAccessor='endDate'
      defaultDate={moment().toDate()}
    />
  </div>
);

export class Home extends React.Component<IHomeProp> {
  componentDidMount() {
    this.props.getSession();
  }

  render() {
    const { account } = this.props;
    return (
      <MyCalendar/>
    );
  }
}

const mapStateToProps = storeState => ({
  account: storeState.authentication.account,
  isAuthenticated: storeState.authentication.isAuthenticated
});

const mapDispatchToProps = { getSession };

type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;

export default connect(mapStateToProps, mapDispatchToProps)(Home);

这是我的软件包版本:

“反应”:“ 16.3.0”, “ react-big-calendar”:“ ^ 0.19.1”, “ moment”:“ 2.22.0”,

有什么想法吗?

2 个答案:

答案 0 :(得分:1)

您可以尝试以下操作:    BigCalendar.setLocalizer(BigCalendar.momentLocalizer(moment));

答案 1 :(得分:0)

如果要添加此依赖项的任何人都必须小心,请更改某些属性。 必须从react-big-calendar导入对Calendar和momentLocalizer的Bigcalendar更改。

这是工作示例=>

length( char const (&)[N] )
import { Calendar, momentLocalizer } from "react-big-calendar";