Rya*_*Sam 7 javascript import reactjs
我试图通过fillCalendar()从组件的方法中提取到它自己的js文件并导入它来清理这个反应组件.最初this.state.datesArray是在componentWillMount()生命周期方法中设置的.现在我正在尝试在构造函数中直接初始化它,因为这是react文档推荐的内容.这样做现在抛出"TypeError:Object(...)不是函数"错误,我不知道为什么.以下是Calendar.js 在这里看到的内容.
Calendar.js
import React, { Component } from 'react';
import { fillCalendar } from '../calendar.tools'
class Calendar extends Component {
constructor(props) {
super(props)
this.state = {
datesArray: fillCalendar(7, 2018),
date: new Date(),
monthIsOffset: false,
monthOffset: new Date().getMonth(),
yearOffset: new Date().getFullYear()
}
}
render() {
return (
...
)
}
}
Run Code Online (Sandbox Code Playgroud)
calendar.tools.js
let fillCalendar = (month, year) => {
let datesArray = []
let monthStart = new Date(year,month,1).getDay()
let yearType = false;
let filledNodes = 0;
// Check for leap year
(year%4 === 0) ?
(year%100 === 0) ?
(year%400) ? yearType = true : yearType = false :
yearType = true :
yearType = false
const monthArrays = yearType ? [31,29,31,30,31,30,31,31,30,31,30,31] : [31,28,31,30,31,30,31,31,30,31,30,31]
if (month === 0) { month = 12; }
let leadDayStart = monthArrays[month-1] - monthStart + 1
// Loop out lead date numbers
for (let i = 0; i < monthStart; i++) {
datesArray.push({date: leadDayStart, type: "leadDate", id: "leadDate" + i})
leadDayStart++
filledNodes++
}
if (month === 12) { month = 0; }
// Loop out month's date numbers
for (let i = 0; i < monthArrays[month]; i++) {
datesArray.push({date: i + 1, type: "monthDate", id: "monthDate" + i})
filledNodes++
}
// fill the empty remaining cells in the calendar
let remainingNodes = 42 - filledNodes;
for (let i = 0; i < remainingNodes; i++) {
datesArray.push({date: i + 1, type: "postDate", id: "postDate" + i})
}
return datesArray
}
Run Code Online (Sandbox Code Playgroud)
Amr*_* LS 11
它只是看起来很好,你只需要export你的功能就可以了.
使用
export let fillCalendar = (month, year) => {
Run Code Online (Sandbox Code Playgroud)
代替
let fillCalendar = (month, year) => {
Run Code Online (Sandbox Code Playgroud)
Eri*_*ulz 11
只是把它放在那里......
我看到这个错误是因为我从错误的模块导入了一个函数!
但我确信你永远不会这样做;-)
(显然有点不幸,因为我导入的函数有一个通用名称 -useParams就我而言)
| 归档时间: |
|
| 查看次数: |
25261 次 |
| 最近记录: |