迭代地改变组件的属性和状态

Question

我正在尝试将 HTML5 应用程序移植到 React Native。在我的原始应用程序中，我有 24 个 DOM 元素，每个元素都有自定义长度、maxLength、描述、isActive 和颜色属性。我会使用 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>
)