React Native JS：コンポーネントクラスが必要です。[オブジェクトオブジェクト]

Question

私はエラーがあり、実際になぜそれがわかりません。これは、テストのためにverry簡単なコードジュストがネイティブ反応だ量をインクリメントするボタンとし、UNE他のクラスを呼び出すクラスを作成したい：

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

export default class Apprentissage1 extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <Text style={styles.welcome}> 
      Welcolm bitch 
     </Text> 
     <Product name="Product 1"/> 
     <Product name="Product 2"/> 
     </View> 
    ); 
    } 
} 

class Product extends Component { 

    constructor(props) {        //Constructeur 
     super(props); 
     this.state = { 
      quantity: 0 
     }; 
    } 


    addToCart(){ 
    this.setState({ 
     quantity: this.state.quantity + 1 
    }) 
    } 
    render(){ 
    return(
     <View style={styles.container}> 
      <h2>{this.props.name}</h2> 
      <p>Quantity: {this.state.quantity}</p> 
      <TouchableHighlight onPress={this.addToCart.bind(this)}> 
      Add To cart 
      </TouchableHighlight> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    }, 
    instructions: { 
    textAlign: 'center', 
    color: '#333333', 
    marginBottom: 5, 
    }, 
}); 

AppRegistry.registerComponent('Apprentissage1',() => Apprentissage1); 

感謝のあなたの助けのために:)

Answer 1

私はエラーがどこでトリガーされているのかはわかりませんが、TouchableHighlightのonPressはthis.bind.addToCart(this)の代わりに() => { this.setState({quantity: this.state.quantity + 1}) }になります。

Answer 2

Productクラスを新しいファイルに分けてインポートします。 React Nativeは、同じファイル内に複数のコンポーネントを持つことは本当に好きではありません。

また、プロジェクトをどのように初期化しましたか？エラーメッセージは何ですか？

Answer 3

<h2>と<p>タグを、React Native <View>コンポーネントに置き換えてください。

React NativeアプリケーションでDOM要素を使用することはできません。

Answer 4

これはh2、pなどの非コンポーネント要素を使用しているためです。これはhtml要素であり、反応しない要素ではありません。 これに使用する正しいコンポーネントはText です。次に、h2とpの両方にTextを使用します。あなたのニーズに合わせてfontSizeを操作するだけです。

<Text style={{ fontSize: 18 }}>{this.props.name}</Text> 
<Text style={{ fontSize: 12}}>Quantity: {this.state.quantity}</Text> 

またToucheableHighlightは、単一の要素ではない文字列が含まれている必要があります。

<ToucheableHighlight 
    onPress={this.addToCart.bind(this)} 
    > 
    <Text> 
     Add to Cart 
    </Text> 
    </ToucheableHighlight>