如何在React Native中从单独的组件创建对象数组?

死亡第一人

我是React Native的新手,所以我知道我有很多东西要学习。

我在这里创建一个自定义类组件:

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

class Square extends React.Component{
    constructor(pos,text,won,save){
        this.state = {
            pos : 0,
            text : 'EDIT',
            won : false,
            save : false,
        };
    }

    setPos = (pos) =>{
        this.setState(pos)
    }
    getPos = () => {
        return (this.pos);
    }

    setText=(text)=>{
        this.setState(text)
    }
    getText=()=>{
        return (this.text);
    }

    setWon=(won)=>{
        this.setState(won)
    }
    getWon=()=>{
        return (this.won);
    }

    setSave=(save)=>{
        this.setState(save)
    }
    getSave=()=>{
        return (this.save);
    }
};


export default Square;

然后,我想在不同的组件中创建这些对象的数组,并显示每个对象的信息。

import {View, Text, StyleSheet, Button, Alert} from 'react-native';
import Square from '../components/Square';





const NewGameScreen = () => {

   let arrSquare = [];

   for (let i = 0; i < 25; i++){
       arrSquare.push({

           THIS IS WHERE I'M HAVING TROUBLE

       });
   }

   console.log(arrSquare[0].getPos)
    
    return(
        <View style = {styles.screen}>
            <View style = {styles.row}>
               <Text>{arrSquare[0].getPos}</Text>
            </View>
        </View>
    )

};

但是从以上代码中,我确定很明显我遗漏了一些东西。我本来希望使用类似的东西, Square[i].setPos(i);但是会引发错误。控制台日志还给出了“ undefined”,这使我觉得我尚未声明某些内容或未正确声明它。提前致谢。

Zyzz Shembesh

好吧,我要做的是拥有一个简单的json对象数组,如下所示:

let squareArr = [{          
            id: 0,
            pos : 0,
            text : 'EDIT',
            won : false,
            save : false,
        },
        {
            id: 1,
            pos : 0,
            text : 'EDIT',
            won : false,
            save : false,
        },
        {
            id: 2,
            pos : 0,
            text : 'EDIT',
            won : false,
            save : false,
        }
]

然后您可以进行读取和编辑。

显示位置:

在渲染方法中,您可以执行以下操作:

<View style = {styles.screen}>
     <View style = {styles.row}>
         squareArr.map((square) => <Text>{square.pos}</Text>)
     </View>
</View>

编辑职位:

如果要更改JSON中的值,则只需使用对象索引作为指示您想要更改的对象的方法。例如,要更改pos第二个对象,则可以执行以下操作:

squareArr[1].pos = 3

我不太确定整个项目将为您提供最佳解决方案,但是我希望这会有所帮助。

随时问您有什么问题

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在 React Native 中为组件创建单独的类并将其用作通用类?

来自分类Dev

如何在 React Native 中创建全局布局组件?

来自分类Dev

访问要在React Native Text组件中显示的对象数组

来自分类Dev

如何在React Native中渲染对象?

来自分类Dev

如何在React Native中传递对象?

来自分类Dev

如何在React Native中获取数组对象内的嵌套数组对象

来自分类Dev

如何在React Native中让组件控制同级组件?

来自分类Dev

如何在 React Native 组件周围传递全局对象?

来自分类Dev

如何在React.js中循环遍历对象并创建子组件

来自分类Dev

如何在React Admin的show / ArrayField组件中呈现嵌套在对象内部的数组的内容?

来自分类Dev

如何在json中创建对象数组?

来自分类Dev

如何在python中创建对象数组

来自分类Dev

如何在javascript中创建对象数组

来自分类Dev

如何在php中创建对象数组

来自分类Dev

如何在Javascript中创建数组对象

来自分类Dev

如何在C中创建对象数组?

来自分类Dev

如何在 Python 中创建对象数组?

来自分类Dev

如何在React.js中从数组中删除组件

来自分类Dev

如何在React Native中连接JSX组件

来自分类Dev

如何在React Native中实现'FrameLayout'组件?

来自分类Dev

如何在React Native中获取Text组件的行数?

来自分类Dev

如何在React Native中实现'FrameLayout'组件?

来自分类Dev

如何在 React Native 中对齐两个组件

来自分类Dev

如何在 React Native 中显示底部导航上方的组件?

来自分类Dev

如何在React中创建可搜索的组件

来自分类Dev

React,如何在字符串中动态创建组件?

来自分类Dev

如何在React中创建可重用的目录组件

来自分类Dev

如何在动态创建的React组件中添加动画

来自分类Dev

如何在React中创建upvote / downvote组件?

Related 相关文章

  1. 1

    如何在 React Native 中为组件创建单独的类并将其用作通用类?

  2. 2

    如何在 React Native 中创建全局布局组件?

  3. 3

    访问要在React Native Text组件中显示的对象数组

  4. 4

    如何在React Native中渲染对象?

  5. 5

    如何在React Native中传递对象?

  6. 6

    如何在React Native中获取数组对象内的嵌套数组对象

  7. 7

    如何在React Native中让组件控制同级组件?

  8. 8

    如何在 React Native 组件周围传递全局对象?

  9. 9

    如何在React.js中循环遍历对象并创建子组件

  10. 10

    如何在React Admin的show / ArrayField组件中呈现嵌套在对象内部的数组的内容?

  11. 11

    如何在json中创建对象数组?

  12. 12

    如何在python中创建对象数组

  13. 13

    如何在javascript中创建对象数组

  14. 14

    如何在php中创建对象数组

  15. 15

    如何在Javascript中创建数组对象

  16. 16

    如何在C中创建对象数组?

  17. 17

    如何在 Python 中创建对象数组?

  18. 18

    如何在React.js中从数组中删除组件

  19. 19

    如何在React Native中连接JSX组件

  20. 20

    如何在React Native中实现'FrameLayout'组件?

  21. 21

    如何在React Native中获取Text组件的行数?

  22. 22

    如何在React Native中实现'FrameLayout'组件?

  23. 23

    如何在 React Native 中对齐两个组件

  24. 24

    如何在 React Native 中显示底部导航上方的组件?

  25. 25

    如何在React中创建可搜索的组件

  26. 26

    React,如何在字符串中动态创建组件?

  27. 27

    如何在React中创建可重用的目录组件

  28. 28

    如何在动态创建的React组件中添加动画

  29. 29

    如何在React中创建upvote / downvote组件?

热门标签

归档