Question

我正在尝试应用react-native-calendar。我的代码是

import React from 'react';
import {Calendar} from 'react-native-day-picker';
...
 const MyCalendar = () => (
 var from = new Date();
 from.setDate(from.getDate() - 16);
 var to = new Date();
 var startDate = new Date();
 startDate.setMonth(startDate.getMonth() + 1);
<View style={styles.container}>
            <Calendar
                monthsCount={24}
                startFormMonday={true}
                startDate={startDate}
                selectFrom={from}
                selectTo={to}
                width={350}
                onSelectionChange={(current, previous) => {
                    console.log(current, previous);
                }}
            />
        </View>;
);
export default MyCalendar;

然后我得到了语法错误。但由于项目经理的一些要求，我不喜欢所示的风格：

class XXX extends XXXX {
constructor(...) {
}
render() { ...}
}

我的问题是我如何初始化诸如from，to，startDate之类的值。那么我该如何解决这个问题呢？

Answer 1

- </View>; you can't have semicolon after tags
- You have to write views in return(...)
- Now you can call myCalender from class

 const MyCalendar = function () {
        var from = new Date();
     from.setDate(from.getDate() - 16);
     var to = new Date();
     var startDate = new Date();
     startDate.setMonth(startDate.getMonth() + 1);
    return(
    <View style={styles.container}>
                <Calendar
                    monthsCount={24}
                    startFormMonday={true}
                    startDate={startDate}
                    selectFrom={from}
                    selectTo={to}
                    width={350}
                    onSelectionChange={(current, previous) => {
                        console.log(current, previous);
                    }}
                />
            </View>
    );
    };

Answer 2

如果我们有箭头函数的多个语句，我们需要使用块体{}。

请参阅Function body description of arrow functions in MDN，

在简洁的主体中，只需要一个表达式，并且是一个隐式表达式返回附上。在块正文中，您必须使用显式返回言。

因此，您需要返回View组件，它是MyCalendar的最后一个语句。

这就是我删除Calendar组件onSelectionChange的{}的原因，因为我们可以使用简洁的body来表示一行语句。

一些额外的修理。

对于那些我们永远不会重新赋值的变量，我们应该使用 const 。

请参阅eslint-plugin-react rules的Enforce boolean attributes notation in JSX (jsx-boolean-value)，

在JSX中使用布尔属性时，可以设置属性值为true或省略值。此规则将强制执行其中一个或另一个保持代码的一致性。

这就是为什么我在Calendar中删除了startFormMonday的真值。

修复后的代码如下，

const MyCalendar = () => {
  const from = new Date();
  from.setDate(from.getDate() - 16);
  const to = new Date();
  let startDate = new Date();
  startDate.setMonth(startDate.getMonth() + 1);
  return (
    <View style={styles.container}>
      <Calendar
        monthsCount={24}
        startFormMonday
        startDate={startDate}
        selectFrom={from}
        selectTo={to}
        width={350}
        onSelectionChange={(current, previous) => console.log(current, previous)}
      />
    </View>
  );
};

我正在使用Atom文字编辑器并使用eslint-config-airbnb作为我的风格指南。它们有助于语法错误检测。

如何在react-native-day-picker中初始化状态？

2 个答案: