迭代更改组件的属性和状态

我试图将HTML5应用程序移植到React Native。在我的原始应用程序中，我有24个DOM元素，每个元素都具有自定义长度，maxLength，description，isActive和color属性。我会使用jQuery.each（）;遍历元素并使用构造函数为每个元素存储索引和jQuery对象。迭代更改组件的属性和状态

构造函数有各种原型函数来获取/设置属性以及相关的样式更改。有些函数会改变相邻元素的属性和样式，我会使用构造对象的数组访问这些函数。

所以我的问题。我如何遵循React Native中的类似模式？具体而言，如何将“元素”添加到数组中，然后遍历该数组，从而对所选元素进行可视/数据更改？

一个例子：

jQuery的

$(document).ready(function(){ 
    var activities = []; 
    Activity = function (idx, ele) { 
     this.idx = idx; 
     this.ele = ele; 
    } 
    $('.activity').each(function(index){ 
     activities[index] = new Activity(index, $(this)); 
    }); 
});

来源

2017-04-13 MHz

很广。一些代码示例会帮助:) –

可以在阵列定义的属性，然后遍历它。要改变他们操纵数组。也许把它放入状态。

const elements = [ 
    { 
    style: { 
     color: 'red', 
    }, 
    text: 'first', 
    }, 
    { 
    style: { 
     color: 'green', 
    }, 
    text: 'second', 
    }, 
    { 
    style: { 
     color: 'blue', 
    }, 
    text: 'third', 
    }, 
]

...

elements.map((element) => 
    <View style={element.style}> 
    <Text>{element.text}</Text> 
    </View> 
)

来源

2017-04-13 00:56:43

对于具有定义数量的元素的应用程序，地图功能是否真的有必要？我可以看到这个答案是在类似的维恩： http://stackoverflow.com/questions/37446029/render-content-dynamically-from-an-array-map-function-in-react-native – MHz

好吧，你想要遍历数组，map有什么不好？只有在您更改其数据时才更新元素，而不是在每次地图调用时更新元素。 –

这很好。我想我现在明白它的工作原理。 map函数中的jsx只有在值的时候才会改变。那么地图必须在哪里更新呈现的内容呢？我正在改变我的环境以允许终端日志，以便我可以测试。 – MHz

迭代更改组件的属性和状态

回答

相关问题