Reactjs React Native JS:需要一个组件类，得到[object]

我有一个错误，真的不知道为什么。这是一个非常简单的代码，仅用于test react native，想要创建一个调用其他类的类，并使用一个按钮来增加数量：

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

import React，{Component}来自'React'；
进口{
评估学，
样式表，
触控高光，
文本，
看法
}从“反应本机”；
导出默认类ApprentMessage1扩展组件{
render（）{
返回(
韦尔科姆婊子
);
}
}
类产品扩展组件{
建造师（道具）{//constructureur
超级（道具）；
此.state={
数量：0
};
}
addToCart（）{
这是我的国家({
数量：this.state.quantity+1
})
}
render（）{
返回(
{this.props.name}
数量：{this.state.Quantity}

添加到购物车
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
},
欢迎:{
尺寸：20，
textAlign:'中心'，
差额：10，
},
说明：{
textAlign:'中心'，
颜色：'#333333'，
marginBottom:5，
},
});
AppRegistry.registerComponent（'ApprentMessage1'，（）=>ApprentMessage1）；

---

谢谢你的帮助：）

我不确定错误是在哪里触发的，但是你的

触摸屏突出显示的
可以是
（）=>{this.setState（{quantity:this.state.quantity+1}}
而不是
this.bind.addToCart（this）
我不确定错误是在哪里触发的，但是你的
onPress
上的
TouchableHighlight
可以是
（）=>{this.setState（{quantity:this.state.quantity+1}）
而不是
this.bind.addToCart（this）
将产品类分离到一个新文件，然后导入它。React Native并不真正喜欢在同一个文件中包含多个组件

你是如何初始化这个项目的？错误消息是什么？
将产品类分离到一个新文件，然后导入它。React Native并不真正喜欢在同一个文件中包含多个组件

你是如何初始化这个项目的？错误消息是什么？
用React Native
组件替换您的
和
标记

不能在React本机应用程序中使用DOM元素。
用React本机组件替换
和
标记

您不能在React本机应用程序中使用DOM元素。
这是因为您使用的是非组件元素，如h2、p，它们是html元素，而不是React本机组件。
用于此操作的正确组件是
Text
然后对h2和p使用文本。只需根据您的需要调整其字体大小即可

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

这是因为您使用的是非组件元素，如h2、p，它们是html元素，而不是react本地组件。
用于此操作的正确组件是
Text
然后对h2和p使用文本。只需根据您的需要调整其字体大小即可

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

如果不使用WebView组件，则无法在react本机应用程序中呈现HTML。。。此错误与产品组件中的渲染功能有关尝试从
导出默认类Apprentissage1扩展组件中删除
导出默认值
{
并将html组件替换为react本机组件，例如
如果不使用WebView组件，则无法在react本机应用程序中呈现html…此错误与产品组件中的呈现功能有关尝试从
导出默认类Apprentissage1扩展组件中删除
导出默认值
{
并将html组件替换为react-native组件，如
，这是不正确的。react-native在同一文件中包含多个组件时没有问题，只要只导出一个默认值。这是不正确的。react-native在同一文件中包含多个组件时没有问题，只要只有一个默认值被导出。很好的捕获。这肯定会导致问题。谢谢，它工作了！我已经有一个关于元素的其他错误，该元素必须有一个子元素（我在里面）很好的捕获。那肯定也会引起问题。谢谢，它起作用了！我已经有一个关于必须有子元素的元素的其他错误（我在里面）谢谢，它起作用了！我已经有一个关于必须有子元素的元素的其他错误（我在里面）@BlackStef很棒！编辑了我的答案，以便在有人需要时包含该答案。谢谢，它起作用了！我已经在元素中出现了另一个错误，该元素必须有子元素（我已经在里面）@BlackStef Great！编辑了我的答案，以便在有人需要时包含该答案。