迭代更改組件的屬性和狀態

我試圖將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

迭代更改組件的屬性和狀態

回答

相關問題