Wie initialisiere ich den Status in react-native-day-picker?

Question

Ich versuche, react-native-Kalender anzuwenden. Mein Code ist

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; 

Dann bekam ich Syntaxfehler. aber ich ziehe es nicht auf Stil aufgrund einiger Anforderung unserer Projektmanager gezeigt:

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

Mein Problem ist, wie kann ich die Werte wie von, nach, startdate initialisieren. Also, wie soll ich dieses Problem beheben?

Answer 1

Wir müssen Block body {} verwenden, wenn wir mehrere Anweisungen für Pfeilfunktionen haben.

Siehe Function body description of arrow functions in MDN,

In einem prägnanten Körper, nur ein Ausdruck erforderlich ist, und ein implizites return angebracht ist. In einem Blockkörper müssen Sie eine explizite Rückgabe Anweisung verwenden.

Daher müssen Sie die View-Komponente, die letzte Anweisung Ihres MyCalendar ist, zurückgeben.

Und das, warum ich die {} für onSelectionChange der Kalender-Komponente entfernen, weil wir prägnante Körper für eine Zeile-Anweisung verwenden können.

---

Einige zusätzliche Reparaturen.

Für diese Variablen wir nie Wert neu zuweisen, sollten wir const verwenden.

Siehe Enforce boolean attributes notation in JSX (jsx-boolean-value) von eslint-Plugin reagieren Regeln,

Wenn ein Boolesche Attribut in JSX verwenden, können Sie den Attributwert auf true gesetzt oder den Wert nicht angegeben. Diese Regel erzwingt die eine oder andere Konsistenz in Ihrem Code zu halten.

Das warum habe ich den wahren Wert für startFormMonday im Kalender entfernt.

-Code nach wie folgend, reparierte

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

I Atom Texteditor verwenden und eslint-config-airbnb wie mein Styleguide verwenden. Sie helfen bei der Syntaxfehlererkennung.

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