Question

我正在尝试使config（）运行，但是它以某种方式失败了。

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

export default class try1 extends Component {

  constructor(noofVertices){
    super();
    this.noofVertices = this.noofVertices
    this.edge = {}
this.a = [];}


addVertex(v){
  this.edge[v] = {}
}

addEdge(v, w,weight){
  if (weight == undefined) {
           weight = 0;
       }
       this.edge[v][w] = weight;
  }

config(){

    var vertices = [ 'App0', 'App1', 'App2', 'App3', 'App4' ];

    // adding vertices
    for (var i = 0; i < vertices.length; i++) {
      this.addVertex(vertices[i]);
    }

    // adding edges
    this.addEdge('App0', 'App1',1);
    this.addEdge('App0', 'App2',1);
    this.addEdge('App0', 'App3',1);
    this.addEdge('App0', 'App4',1);

    this.addEdge('App1', 'App0',1);
    this.addEdge('App1', 'App2',1);
    this.addEdge('App1', 'App3',1);
    this.addEdge('App1', 'App4',1);

    this.addEdge('App2', 'App0',1);
    this.addEdge('App2', 'App1',1);
    this.addEdge('App2', 'App3',1);
    this.addEdge('App2', 'App4',1);


    this.addEdge('App3', 'App0',1);
    this.addEdge('App3', 'App1',1);
    this.addEdge('App3', 'App2',1);
    this.addEdge('App3', 'App4',1);

    this.addEdge('App4', 'App0',1);
    this.addEdge('App4', 'App1',1);
    this.addEdge('App4', 'App2',1);
    this.addEdge('App4', 'App3',1);


    this.traverse('App1');
    } 



traverse(vertex)


 {

            for(var adj in this.edge[vertex])
                this.a.push(this.edge[vertex][adj])
        this.a.sort()


           //this.updateEdge1('App0');   
        }




render(){

  return (
    <View style={styles.container}>

      this.config()
      <Text>{this.a}</Text>

    </View>
  );
}
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },

}
);

我希望屏幕上显示11111。

它显示错误“不变违反：文本字符串必须在组件中呈现。”

我正在尝试处理图形，我也尝试过地图，但是那没有用。

反应原生支持地图吗？

Answer 1

您不能传递函数，它会将其解释为字符串值，而View无法呈现文本。

您可以使用生命周期方法执行此功能。

Answer 2

请注意，您在this.a组件上的try1属性是一个数组：this.a = [];，而您正试图直接在render()方法中显示此属性，如下所示：{ {1}}。但是，由于以下原因，这会引起问题：

<Text>{this.a}</Text>方法不支持直接呈现仅数组的返回类型。调用render()组件的React方法时，它必须返回以下之一：

反应元素。通常是通过通过JSX 创建的。例如，render()和<div />是React元素，分别指示React渲染DOM节点或另一个用户定义的组件。
数组和片段。让您从渲染返回多个元素。有关更多详细信息，请参见有关片段的文档。
门户。让您将子级渲染到另一个DOM子树中。有关更多详细信息，请参见门户网站上的文档。
字符串和数字。它们在DOM中呈现为文本节点。布尔值或null。什么都不渲染。（大多数情况下都支持返回测试&& <MyComponent />模式，其中test为布尔值。）

有关更多信息，请查看<Child /> spec。

此代码中还有其他错误：

自定义react组件必须以大写字母命名，否则JSX会认为这是HTML标记。将render()重命名为try1。
将配置函数调用移至Try1语句之前，因为return语句希望返回实际视图本身。

请牢记这些要点，尝试遍历return并为数组中的每个元素分配一个this.a元素以供显示，如下所示：

Text

希望有帮助！

Answer 3

您正在尝试在<Text></Text>组件中呈现一个数组。您只能呈现纯字符串。

如果要在组件内部显示动态文本，请使用“状态”。这可能对您有帮助：

constructor(props){
 super(props);
 ...
 ...
 this.state = {
  a = []
 }
}

然后：

render() {

 this.config();

 return(
    <View style={styles.container}>
        this.state.a && this.state.a.map(data=> (
           <Text>{data}</Text>
        ));
    </View>

 )  
}

Answer 4

this.config（）是使用jsx编写的函数。如果要调用config函数，则必须在jsx之外编写。返回this.config（），将其视为字符串。每个字符串都必须在Text标记内。所以您会看到此错误。

render(){
  this.config()
  return (
    <View style={styles.container}>
      <Text>{this.a}</Text>
    </View>
  );
}

如何修复，错误是“不变违反：文本字符串必须在<Text>组件内呈现。”

4 个答案: