react-native-day-pickerの状態を初期化するにはどうすればよいですか？

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() { ...} 
} 

私の問題は、私は、そのようなたstartDate、へ、からなどの値を初期化することができる方法です。 どうすればこの問題を解決できますか？

Answer 1

矢印機能の文が複数ある場合は、ブロック本体{}を使用する必要があります。

は、Function body description of arrow functions in MDNに簡潔体で

参照のみ発現が必要であり、暗黙 リターンが取り付けられています。ブロックボディのでは、明示的な返信 ステートメントを使用する必要があります。

したがって、MyCalendarの最後のステートメントであるViewコンポーネントを返す必要があります。

私は1行のステートメントに対して簡潔な本体を使用できるので、なぜカレンダーコンポーネントのonSelectionChangeの{}を削除するのですか？

---

いくつか余分な修理。

値を再割当てしない変数については、constを使用する必要があります。 JSXのboolean属性を使用している場合

は、eslint・プラグインに反応規則の Enforce boolean attributes notation in JSX (jsx-boolean-value)を参照してください、あなたは真の属性値 を設定するか、値を省略することができます。このルールは、コードに一貫性を持たせるために一方または他方を実行します。

なぜ、CalendarのstartFormMondayの真の値を削除したのですか。私はAtomテキストエディタを使用して、私のスタイルガイドとしてeslint-config-airbnbを使用しています

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> 
); 
}; 

コードの後、次のように修理しました。構文エラーの検出に役立ちます。

Answer 2

- </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> 
    ); 
    };