2017-11-20 21 views
1

質問があります。React Native:小道具と州の両方を作成する

私はこのコンポーネントに小道具と状態の両方を含むようにしています。

クラスベースのコンポーネント用に小道具を定義する方法を教えてもらえますか?

私は次のようなエラーに

"ReferenceError: Can't find variable: logstringdate" 

を取得していますこれは私がlogstringdate、BMI、体重、小道具としてLOGDATEがしたい私のコード

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' 
    }, 
}; 

です。

誰かが私に何が間違っているか教えてもらえますか?また

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

、あなたは(あなたが実際にそれらを使用していない)constructorブロックスコープ内ではなく、あなたのrenderで変数を宣言した:あなたはthisキーワードとプロパティを参照する必要がありますclassメソッド内

答えて

1

あなたは変数を宣言していなかった別々のブロックコンテキストである方法:

const { logstringdate } = this.props; 

または:

<Text>{this.props.logstringdate}</Text> 
関連する問題