React Native: Erstellung von Requisiten und Status

Question

Eine Frage nicht.

Ich habe diese Komponente, um sowohl Stützen als auch Zustand zu enthalten.

Kann mir jemand sagen, wie ich Requisiten für eine klassenbasierte Komponente definieren kann?

Ich erhalte die folgenden Fehler

"ReferenceError: Can't find variable: logstringdate" 

Dies ist mein Code

import React, { Component } from 'react'; 
import { StyleSheet, Text, View } from 'react-native'; 



export default class Logitem extends Component { 

    constructor(props) { 
    super(props); 
    const { logstringdate, bmi, weight, logdate } = props; 
    } 


onWeightClick =() => { 
    console.log('The element ==> '+logdate); 
} 


render() { 

    return (
    <View style={styles.containerStyle}> 
       <View style={styles.headerContentStyle}> 
        <Text>{logstringdate}</Text> 
        <Text>{bmi}</Text> 
       </View> 
       <View style={styles.thumbnailContainerStyle}> 
        <Text onPress={this.onWeightClick}>{weight}</Text> 
       </View> 
    </View> 
); 

} 
}; 

const styles = { 
    containerStyle: { 
    borderWidth: 1, 
    borderRadius: 2, 
    borderColor: '#ddd', 
    borderBottomWidth: 0, 
    shadowColor: '#000', 
    shadowOffset: { width: 0, height: 2}, 
    shadowOpacity: 0.1, 
    shadowRadius: 2, 
    elevation: 1, 
    marginLeft: 5, 
    marginRight: 5, 
    marginTop:10, 
    }, 
    thumbnailContainerStyle: { 
    justifyContent: 'center', 
    alignItems: 'center', 
    marginLeft: 10, 
    marginRight: 10, 
    flexDirection: 'row' 

    }, 
    headerContentStyle: { 
    flexDirection: 'column', 
    justifyContent: 'space-around' 
    }, 
}; 

Ich mag würde logstringdate, bmi, Gewicht, LogDate als Requisiten haben.

Kann mir jemand sagen, was hier falsch ist?

Answer 1

wenn innerhalb eines class Methoden, die Sie Eigenschaften mit dem this Schlüsselwort verweisen:

const { logstringdate, bmi, weight, logdate } = this.props; 

Auch deklariert Sie die Variablen innerhalb des constructor Block Umfang (die Sie nicht wirklich mit ihnen), aber in Ihrem render Verfahren, bei dem ein separater Block Kontext ist die Variable nicht deklarieren haben:

const { logstringdate } = this.props; 

Oder:

<Text>{this.props.logstringdate}</Text>