Question

我正在尝试将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));
    });
});

Answer 1

您可以在数组中定义属性，然后遍历它。要更改它们操纵数组。也许把它放到州里。

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

迭代地更改组件

1 个答案: