React-Native “期望一个组件类，得到对象 Object”答案

【问题标题】：React-Native "expected a component class, got object Object"React-Native “期望一个组件类，得到对象 Object”
【发布时间】：2017-10-17 16:53:24
【问题描述】：

由于标题中的错误，我有一个大代码无法运行。这是我的代码的一个文件，任何人都可以看到有什么问题吗？我相信这是行“{this.state.todos.map((todo,index) =>”（代码行 62）

我已将对象的名称大写，所以这不是问题（我认为）。 npm -v 4.6.1

import React, { Component } from 'react';
//import $ from 'jquery';
import { Button, View,  FormGroup, FormControl, ControlLabel } from 'react-native';
import { Text } from 'react-native-svg'

/* generating sample data to be shown, these data names are used to access the values*/
var todos = [];

//Will not work first time, since list do not exist in AsyncStorage. 
//Get from AsyncStorage. 
try{
  todos = JSON.parse(AsyncStorage["todos"]);
}catch(ex){
  console.log("Not working" + ex);
  todos = [];
}

//Errormessage for errorhandeling. 
var errorMessage = "";
/*--------------------*/

class Todos extends Component {
  constructor(props) {
    super(props);

    this.state = {
      todos
    };

    this.handleAddTodo = this.handleAddTodo.bind(this);
  }

  handleAddTodo(todo) {
    /* creates todo in list that shows*/
    this.setState({todos: [...this.state.todos, todo]});
    /*this code saves in AsyncStorage*/
    todos.push(todo);
    //AsyncStorage...
    AsyncStorage.setItem("todos", JSON.stringify(todos));
  }


/* function that removes todos from the list*/
  handleRemoveTodo(index) {
    this.setState({
      todos: this.state.todos.filter(function(e, i) {
        return i !== index;
      })
    })
    /* now working as expected*/
    todos.splice(index, 1);
    AsyncStorage.setItem("todos", JSON.stringify(todos));
  }

  render() {
    return (
      <View>
        <TodosInput onAddTodo={this.handleAddTodo} />
        <hr />
          <Text>todo count: <span>{this.state.todos.length}</span></Text>
          <View>
            <View>{this.state.todos.map((todo,index) =>
              <View key={index}>
                <Text style={style.list-group-item-heading}>{todo.todoTitle}<small><span style={style.label} label-info></span></small>  </Text>

                <View>{todo.todoDesc}</View>

                <Button bsStyle="danger" onClick={this.handleRemoveTodo.bind(this, index)}><span style={style.glyphicon} glyphicon-trash></span></Button>
              </View>
            )}</View>
        </View>
      </View>
    );
  }

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

这更有可能是因为使用了 html 标签而不是原生组件。比如hrspan和small。

因此，您需要创建自己的组件并将它们的名称命名。以下是如何解决您的问题的可能示例：

const Small = ({ children }) => (
  <Text
    style={{
      fontSize: 10
    }}
  >
    {children}
  </Text>
);

const HR = () => (
  <View
    style={{
      height: 1,
      borderBottomColor: "black",
      borderBottomWidth: 1
    }}
  />
);

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View>
          <Text>This is span</Text>
        </View>
        <View>
          <Text>
            Regular test <Small>With {"<small>"} text</Small> Inside
          </Text>
        </View>
        <View>
          <Text>This is {"<HR />"} bellow</Text>
          <HR />
        </View>
      </View>
    );
  }
}

UPD：实际上上面的代码中还有很多其他的错误

可能问题的快速列表：

正如 dalready 所指出的 - 用原生组件替换所有 html 标记
style={style.list-group-item-heading} 除了 ni 字符串之外，您不能在 js 中使用破折号分隔符 - 可能的修复：style={style['list-group-item-heading']}
<View>{todo.todoDesc}</View> - 你必须用 Text 组件写文字
<Button /> 组件需要 title 它应该是一个字符串，并且它没有 OnClick 处理程序但需要 OnPress

总结一下——我会注意到 react native 使用 jsx 但它不是 html。它有自己的 API，您必须仔细掌握它。

【讨论】：